I've settled on a theme for one of my blogs. Is it possible to just wrap your stylesheet (style.css on most themes) in @media queries, and make your entire theme responsive, or fluid, so it works well on all browsers and screen resolutions?

If so, does anybody know how I can accomplish this? Or is there a better, easier way to accomplish this?

I mean, can I just put this at the top of my style.css?

@media screen and (max-height: 700px) {
    // style.css rules

and of course at the very bottom, just:


Will this make my entire theme fluid or responsive, or is it much more in-depth than that? Any guidance in this regard would be greatly appreciated!

  • This is a CSS question, not a WordPress question. – Chip Bennett Feb 16 '13 at 20:22
  • Yes, Chip ... hence the reason I used CSS as a tag about a WordPress site ... hehe ... actually, it's not off-topic at all, and indeed there are several similar questions to mine that didn't help me with my solution. I'm not saying that you shouldn't flex your muscles and show "who's boss" every now and then, but perhaps I'd suggest you do so to real illegitimate questions -- not ones related to Wordpress and tagged appropriately. – Jason Weber Feb 17 '13 at 1:23
  • 1
    Welcome to WPSE. There is no "muscle flexing" or "showing who's boss" here. SE sites work under a community moderation system, and questions are expected to meet the scope of the site as stated in the FAQ. The important statement in the FAQ in this case is: "Note that we do not handle questions not specific to WordPress (even if they happen in its context)...generic PHP/MySQL/CSS/JavaScript/jQuery/TinyMCE issues". Note how your accepted answer is completely WordPress agnostic? That demonstrates why the question is not in the WPSE scope. – Chip Bennett Feb 17 '13 at 1:26
  • "just wrap your stylesheet (style.css on most themes)" ... isn't the implication there that this is a WP blog? I could paste my entire style.css in here, but wanted to avoid it ... anyway, it's fine ... I'll figure things out. I made my own theme, but focused mostly on graphics/aesthetics, SEO, and functionality, neglecting to make it fluid or responsive, and I want to upload it to .org, but not until it contains the proper media queries ... and I'm not too proficient with CSS. – Jason Weber Feb 17 '13 at 1:35
  • I really don't want to belabor the point too much, but as the FAQ states: just because a question arises in the context of WordPress doesn't mean that such question is inherently in-scope for WPSE. You could take the rendered output of your Theme, save it as static HTML/CSS, and the answer to the question would not change. Convert that static HTML to a Drupal Theme, and the answer would not change. There's nothing WordPress-specific in either the question or the answer. That's why it's not in-scope for WPSE. – Chip Bennett Feb 17 '13 at 1:42

You can use media queries to change the styling per element depending upon specifications. You would have to add these to the bottom of your stylesheet, so that it overwrites your default styles depending upon the screensize

This following media-queries template from bootstrap is only based on screen size. You can use more complex media-queries to target specific device as well.

To Support older browsers (IE), you'd have to use conditional statements to include respond.js or media-queries.js . Media queries will only work with device specifications such as screen, handheld etc...

A great place to start is: http://alistapart.com/article/responsive-web-design

Eg: Bootstrap Media queries. /* Large desktop */ @media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Not the answer you're looking for? Browse other questions tagged or ask your own question.