How To Set Widths Based On The Browser Width

[Kervtuza]

Hey guys,

 

So I am about to start marking up a website but I am trying to do a bit if planning before I start.

 

I want the site to be flexible and mobile friendly. I am trying to do two things.

 

1. When in a full size browser, I want to have 3 divs equally portioned with a width of 33% however, when the browser window has a width of 768px or less I want the divs to change to a width of 50%. Is this possible to do with CSS or jQuery? Which would be better and why?

 

2. I would like to write a conditional statement that says when the browser window is less than 768px use a 2nd navigation(mobile navigation) instead of the regular one. Can this be done with jQuery and what statement would I write to get the width of the browser window?

[falkencreative]

You can do this with CSS and media queries -- no Javascript is needed at all. For the mobile navigation, you should be able to also do that with CSS, hiding or showing the appropriate navigation based on a media query.

[Kervtuza]

Thanks Ben! I'll look into that.

[trenthanover]

As mentioned above by Admin....You can do this with CSS and media queries...this is a best way.