Question 264937 in Html Question posted in
Some basic documentation can be found here.

Html – I don't know why my site is not responsive

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

Tags:

3

Answers


  1. 0

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

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

    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