[Resolved] Theme breakpoints

Home Forums Support [Resolved] Theme breakpoints

Home Forums Support Theme breakpoints

  • This topic has 8 replies, 3 voices, and was last updated 1 year ago by Scott.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #815729
    epickenyan

    Hi. I have elements or styles I want to target for either desktop or responsive version. Which breakpoint in pixels should I use for both max and min width? Is it 767, 768 or 769?

    #815778
    David
    Staff
    Customer Support

    Hi there,

    here are our recommendations:

    https://docs.generatepress.com/article/responsive-display/

    #815785
    epickenyan

    Seen. thanks

    #815798
    David
    Staff
    Customer Support

    Does that help?

    #816304
    epickenyan

    Yes, it does. Cheers!

    #816435
    David
    Staff
    Customer Support

    Awesome ๐Ÿ™‚

    #2085407
    Kyle

    Can someone tell me why the theme breakpoints are max-width 768px, but the Generateblocks breakpoints are max-width 767px.

    I’m new to GeneratePress and just realized this.

    The footer widgets and header section of the theme use max-width 768px, while the blocks plugin uses max-width 767px.

    Shouldn’t they both be max-width 767px or be consistent?

    I’m also curious why neither is mobile first.

    #2085473
    Elvin
    Staff
    Customer Support

    Hi Kyle,

    It’s Tom’s preference.

    See his explanation here. ๐Ÿ™‚ – https://generatepress.com/forums/topic/mobile-breakpoints-best-practice/#post-1305318

    #2581012
    Scott

    You don’t actually need to be consistent. It’s perfectly acceptable to use all manner of weird sizes in order to make individual elements transform at a size that best suits them.

    For example, let’s say you have 4 columns on “desktop” (whatever that is), and you determine that once the width gets down to 1100px, you need to switch to 3 columns (nowadays you would use a flexbox, but bear with me for the sake of example). It’s perfectly OK to have a media query at 1100px that is used only to control the 3-col layout.

    At the same time, you might find that your hero image works fine at 1920px wide, but at 1366px, a common laptop resolution, you want to switch to an image that has been formatted differently, or maybe a different image altogether. It’s OK to throw a media query in there for 1366px and only use it to control the background-image: property of that one hero element.

    There is a big difference between the viewports pre-defined in your page builder that get used during development vs. what the CSS defines when the front-end is actually displayed. They don’t relate.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Theme breakpoints’ is closed to new replies.