Div Width 100 Percent Not Working in Mobile Browser

div width 100 percent not working in mobile browser

This what was happening to me too. Resizes on the desktop just fine but due to a 728px banner at the top of my blog, mobile was looking terrible. It's hard to fit a wide banner on such a small screen without causing problems. If you don't have a banner, maybe you have some element that's too wide, throwing off the rest of the design.

This fixed the problem: <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" /> (This goes in the <head>...</head>)

Lower the initial-scale down from 1.0 till your elements can reach all the way across the page at 100%. This scale made my text a little too small, but Flowtype.js helped. I could go with a smaller banner but I'm satisfied with this solution for now.

UPDATE: The above solution is not really device independent. For example, the "scale" might look great on your phone but too small on your tablet. You might want this instead:

<meta name="viewport" content="width=800" />

This makes all your devices act like a screen that's 800 pixels wide. Or whatever width you need. Works beautifully on my Android phone and Nexus tablet. I think desktop browsers ignore the "viewport" setting, which is fine by me.

width:100% doesn't work on mobile browser

This is a known issue with Safari Browser. You can fix it by creating CSS viewport, or by adding min-width to CSS.

Try min-width: 980px;

Div Width 100% not working when resizing of browser

I figured it out! I set width: 100% to min-width: 100% and that fixes the issues.

100% DIV width is not really 100%

The 100% value is 100% of the parent's width or the view port. See the documentation.

Divs not occupying 100% screen width

What is causing the overflow is the grid-gap property in #header and .grid, they are not counted towards the percentage values you've added, you should remove that and use padding to create the desired spacing.

Edit:

 #header {
    width: 100%;
    height: 50px;
    background-color: red;
    display: grid;
    grid-template-columns: 30% 70%;
    /* grid-gap: 10px; remove this */
    position: fixed;
}
.grid {
    width: 100%;
    height: 150px;
    display: grid;
    grid-template-columns: 25% 75%;
    /* grid-gap: 10px; and this */
}

Edit 2:

Alternatively you can also use the fr unit to occupy the remaining space and still use the grid-gap property:

 #header {
    width: 100%;
    height: 50px;
    background-color: red;
    display: grid;
    grid-template-columns: 30% 1fr; /* 1fr will be 70% - 10px */
    grid-gap: 10px;
    position: fixed;
}
.grid {
    width: 100%;
    height: 150px;
    display: grid;
    grid-template-columns: 25% 1fr; /* 1fr will be 75% - 10px */
    grid-gap: 10px;
}

Make div 100% Width of Browser Window

There are new units that you can use:

vw - viewport width

vh - viewport height

#neo_main_container1
{
   width: 100%; //fallback
   width: 100vw;
}

Help / MDN

Opera Mini does not support this, but you can use it in all other modern browsers.

CanIUse

Sample Image

100% width Css issue only on mobile safari

It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.

This is because when you're setting width:100% to your #top and #header divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.

Mobile Safari's default viewport width is 980px, so it uses 980px as the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.

You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs), or by adding min-width:width of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.

Div Width 100 Percent Not Working in Mobile Browser