StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Genesis "Responsive-ness"

Welcome!

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.

Community Forums › Forums › Archived Forums › General Discussion › Genesis "Responsive-ness"

This topic is: not resolved

Tagged: , , , , , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • April 3, 2019 at 8:15 am #490453
    mantic59
    Participant

    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
    April 3, 2019 at 8:59 am #490456
    Victor Font
    Moderator

    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.

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    April 4, 2019 at 7:06 am #490487
    AnitaC
    Keymaster

    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.

    Need help with customization or troubleshooting? Reach out to me.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.