Search code examples
htmlcssmobilewidth

Site won't adjust to mobile width/meta tag?

"I'm new to coding and I'm having trouble resizing my site for mobile devices. The website works okay for desktop, and everything's set except somehow it won't detect the device-width when on mobile, so the site stretches all the way, and I'd have to move around with the scrollbars."

This question has been answered! And if you've had a similar problem,

have a media query:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="css/mobile.css"/>

and already tried:

  • checking if adding user-scalable or maximum scale would make any
    difference
  • adding a set width or height to the html and body tag
  • deleting the margins
  • floating everything to the left
  • deleting overflow
  • deleting the reset
  • experimenting with min and max widths
  • using vh instead of %

There is an answer below!

Also here is a tutorial for mobile optimization that I used as reference.

Solution

  • Your <body> still has a min-width which is keeping it from shrinking down to screen size.

    I added some rules to make it fit:

    @media screen and (max-width: 480px){

body{
min-width: 0;   /* let the body shrink */
}

#copyright{
margin-left: 0px;
}

#ladder{
width: 100%;   /* have the screen dictate the image size */
height: auto;
margin-left: 0;
padding: 10px;    /* still use padding... */
box-sizing: border-box;   /* ...but make it go on the inside */
}

}