CODEWITHSUNDEEP
javascriptjquerycss
Rob
Rob

Reputation: 2779

Change CSS depending on page width javascript?

We're working on a web app that will deployed to mobile devices, iPad, iPhone, Android. Instead of trying to filter out user agents to display different views, I'd much rather just have my CSS change depending on the width of the screen (that's the only important thing here, really)

We've got something put together with jQuery, and I've changed the CSS for one part so that when the width shrinks, it doesn't take up too much vertical space (shown below)

Old Page Fixed Page

How would I go about implementing something like that on buttons like this:

buttons look buttons broken

Ideally I should be able to change the CSS or something similar so the buttons are stacked up all in a row if width is narrow enough to knock even one button off. After that I can work on making the buttons look correct.

Upvotes: 0

Views: 822

Answers (1)

Matt Stauffer
Matt Stauffer

Reputation: 2752

The simplest way to change CSS depending on the page width is to use Media Queries, which require no JavaScript.

Here's a great intro to Responsive Web Design from the guy who's considered the originator of the concept: http://www.alistapart.com/articles/responsive-web-design/

If you want to actually change page content based on page width, you'll need something like RESS. Here's a simple script for that, but it requires cookies and doesn't adjust on screen resize, so unless you absolutely require it, media queries are a much better.

Upvotes: 6

Related Questions