This question has been asked before here and here but I was unable to find a suitable answer
I don't want to change the default view-port because everything else other than my footer scale beautifully. Strangely, I have a fixed position menu <div> that has always accepted the width: 100% value.
I have tried width: 100%, width: 100vw, and width: inherit. For some reason, a couple full-width images on my site wouldn't work with width: 100%, but took on the correct width when I used width: inherit.
Is there a solution in which I don't have to change the view-port size that I haven't thought of?
My menu <div> which works correctly:
#navbar {
z-index: 5;
width: 100%;
padding: 10px 0px 10px 25px;
background-color: #1391cb;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #3a3a3a;
}
My images which I got to correctly scale:
@media only screen and (max-device-width: 480px) {
#main-content, #main-content-overlay {
width: inherit;
}
}
In addition, certain pages of my site work perfectly on mobile. There is no discernible pattern to which do, and which don't. Some of the pages that work have more content than the height of the device, and others don't. None of my pages exceed the width of the view-port in any way, shape, or form.
