- This topic has 2 replies, 3 voices, and was last updated 3 years, 4 months ago by .
- The forum ‘General Discussion’ is closed to new topics and replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
Greetings. End user here, not a developer, so please excuse what might be a basic question.
At what screen resolution does "responsive" Genesis themes drop a right sidebar to the bottom of the page?
Specifically, I'm running Daily Dish Pro with a right sidebar. If I reduce the width of my browser window, at some point the right sidebar disappears (or rather relocates to the bottom of the page). At what horizontal resolution does Genesis "know" to make the change? Thanks.https://sharpologist.com
It depends on the child theme and what the how the developer chose to code it. There is no "fixed" way of doing it, but it's all handled through the CSS style sheet in its media queries.
If a theme is designed as mobile first, the the mobile aspects are built first and changed as the screen gets larger.
If a theme is built as desktop first, then the wide width is done first and mobile aspects added as the screen is reduced.
Reducing the browser width is not the correct way to test mobile responsiveness. All modern browsers have a built-in mobile testing tool these days. It's important to learn how to use these. Using the built-in inspector also allows you to see the CSS active when your theme's media queries take control.
I use Responsinator a lot (https://responsinator.com) for responsive testing and it works fine just to give you a visual off the different breakpoints.
Daily Dish's breakpoint is at 959. You can see it in the stylesheet under Media Queries:
@media only screen and (max-width: 959px)
As Victor stated, the breakpoints depend on the designer and how they've created the theme, so another themes' breakpoint may not be at 959.
Also, if you were to customize your theme or add in a few plugins, you may notice that they may not appear visually correct at breakpoint 959. At that point, you may need to add additional CSS to a media query to fix it or you may need to create a new media query just for that element that doesn't look right.
Love coffee, chocolate and my Bella!
© 2022 WPEngine, Inc.