Question

I have a simple problem but I can’t seem to find the problem… I’m using media queries for an adaptive web layout for my website navigation bar…Now my smallest media query is min: 320px and max: 480px; When the viewport size is 480px, the menu bar width should be set to 480px from thereon…But when the width get’s around the length of the last text element, the last text element gets pushed to the next line and ignores my fixed set width of 480px…

Any suggestions? PLEASE SEE MY JSFIDDLE

Thank you

Answer 1

It seems to be working fine for me, but try taking out the child class: .dropdown and also try to fix the height as well, like so:

@media screen and (min-width: 320px) and (max-width: 480px){
    #page-wrap{
        width: 480px;
        height: 35px; /*make the height fixed as well*/
    }
}