How to change around responsive breaks?

  • Rice14

    (@rice14)


    7 years, 5 months ago

    Hey guys,

    So I’m using Virtue on seanmcnally.net/events, and I’m trying to change around the way responsive breaks work.

    According to responsivetest.net, the first break is at 1186px, where the photo and text jump to be smaller. The next break is at 978px, where the picture jumps to be on top of the text. After that, at 400px, the picture begins to scale proportionately.

    Basically, I’d like the site to always maintain the 1186px breakpoint resolution, and simply scale proportionately. I was reluctant to contact support, because I’m sure this is a simple CSS fix, but couldn’t seem to find it in the documentation.

    Any help would be appreciated.

    Thanks,
    Sean

Viewing 2 replies - 1 through 2 (of 2 total)
  • Kevin

    (@jx-3p)

    7 years, 5 months ago

    Hey,

    Within the constraints of how the theme is built, this is not optimal.

    Try adding this CSS to theme options> advanced settings and let me know if this is what you’re after:

    .main {
    width: 66.66666667% !important;
    float: left !important;
}

.kad-sidebar {
    width: 33.33% !important;
    float: right !important;
}

    -Kevin

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    7 years, 5 months ago

    Hey,
    So I’ll just add a couple clarifying points. Becuase the theme is a responsive theme the font is always supposed to be readable. Thats a key with responsive, the layout changes to allow for mobile users to read, navigate and use the site without ever needing to zoom in and out to move around the page.

    So there isn’t a point at which the font sizes get smaller they are the same for desktop and mobile becuase thats whats readable. The layout breaks down as your screen gets smaller and images will shrink to fit inside the screen width but in essence you never start “zooming” out on the page or it’s content like you would with a static template.

    Because this responsive code is so built into the core of the theme there isn’t a way to undo that and see the “desktop” version all zoomed out on a small device.

    So if that is what your wanting then I would honestly suggest looking for a different theme. The css hacks you would have to use to try to make that happen with this theme is extensive and not something we support (becuase we recommend responsive and supporting devices).

    I hope that information is helpful. If you are determined to move forward with this theme and you want static some thing you should know is this would take more then css. You will need a child theme becuase you will need to remove a meta tag in the templates/head.php file.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    That would need to be removed.

    Ben
    Kadence Themes

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change around responsive breaks?’ is closed to new replies.