0

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.

Improve this question

1 Answer 1

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, this should give me a great start. I'm also going to see if I can figure out what changed the layout before to have the borders and padding that aren't there when the view is wider.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.