How to make 2 blocks per line on mobile version?

Hi,

you can apply some custom CSS e.g. in the Customizer or any Custom CSS plugin to achieve that.

Use:

@media (max-width: 780px) {
  #rowID {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
  }

  #rowID .panel-grid-cell {
    width: calc(50% - ( 0.75 * 30px ) ) !important;
  }
}

Find out the row ID via the browser tools or just add your own row ID in the settings for this row.

If you want to make it full width again for small sizes, you can use this CSS:

@media (max-width: 480px) {
  #rowID .panel-grid-cell {
    width: 100% !important;
  }
}

Please let me know if this solves your question or if you need further help.

I overlooked that when using a custom row class for the styles, !important must also be used on the styles of flex-wrap and flex-direction. Please try this out.

You’re welcome, thanks for your kind words!
I will mark this topic as resolved.

Feel free to share your opinion about Meteorite in a review.