Set different breakpoints for Promo Box

Support
#1

Hi there,

I would like to set different breakpoints for 4 x promo boxes that I have on this page: https://poseidonportfolio.com/accommodation/glaros/

  • Ideally, I would like the promo boxes to display in two rows between 768 and 979px
  • Smaller than 768px, I would like all the promo boxes to display below each other

If this is not possible, I would like all the promo boxes to display below each other from 768px and smaller.

Thanks!

#2

Hey,

Thank you for writing in!

Just add these queries to solve this:

@media screen and (min-width: 768px) and (max-width: 979px) {
    #x-section-7 .x-column {
       width: 46% !important;
    }
}

@media screen and (max-width: 767px) {
    #x-section-7 .x-column {
       width: 100% !important;
    }
}