Jump to content
Killersites Community
Sign in to follow this  

How To Set Widths Based On The Browser Width

Recommended Posts

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?

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this