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
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
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.
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
Here are some examples for you to work on
https://www.geeksforgeeks.org/how-to-target-desktop-tablet-and-mobile-using-media-query/