Jump to content
Stef's Coding Community
Sign in to follow this  
Kervtuza

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...