April 2, 2013 at 6:12 am #32615
David BrowneParticipantPost count: 157
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
Next smallest.. looks ok with sidebar (this is what I would want to be seeing on the ipad)
The sidebar moves (this is what I actually see on the ipad)
Smallest.. (this is fine for phones etc)
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.
Note: Known to give only give negative critique on design. I don’t mean to offend anybody, it is just more efficient pointing out mistakes than saying “yes, its beautiful” every time.April 7, 2013 at 8:09 pm #33851
cdilsParticipantPost count: 421
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.
You must be logged in to reply to this topic.