breakpoints columns stack

• 

  carminevile · Member · Nov 13, 2021 at 12:29 pm

  • Copy link
  • Add topic to favorites

  Greetings:

  May I pick your brain a bit as to the following modification of the 2021 theme?

  I would like to change the break-point at which the columns stack on smaller devices.

  Specifically, I want the columns to stack as one column on TABLET PORTRAIT and below. They should stay side by side on TABLET LANDSCAPE and above.

  Something like this…

  @media screen and (orientation:portrait;) {
  .column {width:100%;}
  }

  I’ve read that min and max widths are deprecated. I realize that the above will cause the columns to stack if someone turns the monitor sideways.

  The problem is I do not know the correct CSS selector to use. It’s something to do with Flexbox I assume. Maybe you know more about this and can steer me in the right direction.

  I’ve tried .column, .columns, .column-width all to no avail.

  The site address is carminevile.com and it uses the Twenty Twenty-One theme.

  Thank you for any help you can provide.

  Best wishes…

  The blog I need help with is: (visible only to logged in users)

• 

  staff-blorbo · Staff · Nov 13, 2021 at 7:20 pm

  • Copy link

  That’s a bit outside of the scope of customization support we can offer here, but we do have some recommendations at https://wordpress.com/support/editing-css/#css-help or you might want to try a theme that’s a bit more to your liking.

  You can also reach out to the theme’s developers and support community at https://wordpress.org/support/theme/twentytwentyone/