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.

Am I doing something wrong?

https://ibb.co/F3DDZH0
https://ibb.co/YWSYZ1B

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.

Wow, it worked!!! Thank you so much for your help and your time, stay the same cool guys!!!

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.

Oh, I see you already did. Thanks!