skip to Main Content

I’m a beginner in HTML and CSS and i’m working on a project on frontend mentor.
The name of the project is Order Summary Component and I have submitted the project already but the issue is that my project isn’t displaying well on smaller device like an Android phone and I have increased the width of the main container several times on GitHub, the result is still the same. Here is the link to my project https://adebimpeabdulhamideniola.github.io/order-summary-card-component/ and here is the GitHub file link https://github.com/AdebimpeAbdulhamidEniola/order-summary-card-component.git .I need help on what to do to make it display well on smaller device.

Also,pardon any mistake I may have committed as this is my first post on stack overflow after signing up

3

Answers


  1. You can use Bootstrap. Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.You can easily make responsive website. no need to write own css for every devices. https://getbootstrap.com

    Login or Signup to reply.
  2. bootstrap is a good option but if u have time shortage then you can use Display:Flex css property or put all the dimensions in percentage(%) to fix your code.

    Login or Signup to reply.
  3. For mobile adjustment you can use css media query. Media Query is a popular technique that enables to deliver a style sheet to different devices which have different screen sizes and resolutions respectively.

    Add the following to your styles.css file

    /* media query styles */
    @media(max-width: 480px) {
     main {
       width: 90%;
     }
     
     .flex-body {
        padding: 1em 1em;
    }
    
    }
    

    Here are some examples for you to work on

    https://www.geeksforgeeks.org/how-to-target-desktop-tablet-and-mobile-using-media-query/

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search