Changing the responsiveness width; quattro theme

[ᴅᴀᴠɪᴅ]

Hi, there is a chance that this will be really difficult and i may have to just live with the issue but here goes..

With the quattro theme, as with most responsive themes i think, the width automatically changes with the width of the screen/window. The problem is, the sidebar gets put to the bottom of the page when viewed through screen size which an ipad has. This is fine for screens smaller than the ipad, such as smartphones as it makes it clear and it makes sense. Is there anyway of changing the width at which the sidebar moves?

I'm aware I'm probably not using the correct terminology so here is a visual version..

Biggest screen.. looks ok with sidebar
Image 1

Next smallest.. looks ok with sidebar (this is what I would want to be seeing on the ipad)
Image 2

The sidebar moves (this is what I actually see on the ipad)
Image 3

Smallest.. (this is fine for phones etc)
Image 4

So as you can see, the sidebar moves to the bottom on a screen size which is too big. I only want it to move on very small screens where it would not be able to fit nicely. This would mean everybody viewing the site through a tablet of any kind would still have access to the sidebar easily. Only the smartphone people would see it differently.

Help much appreciated, thanks. I have no idea how to go about this, or if it would require a whole redesign of the theme. If you can just point me to the direction of the code which tells the theme when to shift the sidebar and i can have a play until I get it right.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[cdils]

Hey Dave,

What your describing is by design, but you can definitely change it! In your stylesheet do a search for Responsive Design. You'll find the media queries for the various screen sizes.

Sorry I don't remember the query size off the top of my head, but you'll see where it sets the content and sidebar to 100% (along with a bunch of other elements). I think you could just cut it from that media query and paste it into the next smaller size media query.

Hopefully that makes sense! Post your site URL if you run into problems and I'll see if I can help. Also, if you haven't used the StudioPress responsive tool before, it's a great way to test your site at various screen sizes without actually having to hop on all the various devices. 🙂

http://www.studiopress.com/responsive

cheers,
Carrie

---

Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂

I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[Author]

Posts