screen size width problem

[karthick_doosra]

i’ve attached a link below for a web page where i am facing the problem of the nav elements breaking into two lines on a smaller screen or a screen resize and also the section “ABOUT US” faces the same problem where one of the boxes breaks into a seperate line..

http://f7-preview.biz.nf/karthick.co.nr/

also a screen shot:
http://i.imgur.com/PNaZz.png
http://i.imgur.com/AdJE9.png

[matt_sanford]

float ul#menu to the right. set your margin to “margin: 0 2% 0 0;” putting a margin on the left was the problem. If you make the browser small enough it will go to two lines, this is un-avoidable without using media queries. This fix gives you a greater amount of real estate before that happens though.
cheers,

[karthick_doosra]

hey but what about the “about us section”

[matt_sanford]

I don’t understand what you want to accomplish with the “About us” section.

[karthick_doosra]

you will find 3 divs in the about us section.if you resize the screen you will find the last div(box) going down

[matt_sanford]

Not totally sure about this. I am thinking that the floats are what is messing it up. Try not floating them, setting the display to inline block and just using margins to position them .

[wolfcry911]

the problem is the borders. at a certain point 3 * 27.5% + 2 * 6% + 6 * 0.5em becomes too large for the container. You could reduce the width of each div; or change the box-sizing from content-box (standard box model) to border-box, which will include the borders in the 27.5% figure

[karthick_doosra]

hey thanks your solution of border-box worked.Would be nice if you help me solve the other one too

[matt_sanford]

Didn’t i already do that? With this “float ul#menu to the right. set your margin to “margin: 0 2% 0 0;” putting a margin on the left was the problem. If you make the browser small enough it will go to two lines, this is un-avoidable without using media queries. This fix gives you a greater amount of real estate before that happens though. cheers,” ?

[karthick_doosra]

i tried doing that :-( it didnt work..

[Author]

Posts