Currently, I am working on optimizing my website to adjust for mobile browsers. In order to achieve this, I have two CSS files - one that is always included and another with
media="screen and (max-width:500px)"
To ensure proper functionality, I am utilizing the meta tag
<meta name="viewport" content="width=device-width" />
While this setup works perfectly when the content-wrapping divs have a fixed width or when the screen width is less than 500px, I encounter issues when rotating my phone, causing the screen width to exceed 500px. This results in the truncation of divs directly within the body that are set to 100% width. My assumption is that width=device-width causes the CSS to interpret 100% as equal to the screen width, even if the website extends beyond the screen boundaries.
Displayed correctly in a desktop browser (background covering the entire document width):
Issue arises on a flipped phone or Chrome mobile emulation where a portion of the menu gets cut off:
CSS:
#top{
position:relative;
background:rgba(191,186,130,1);
height:150px;
width:100%;
overflow:visible;
}
Is there a method to make the div width span the entirety of the document without requiring JavaScript detection?