I don't know why my site is not responsive

Question

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

Answer 1

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/

Answer 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.