Markdown block responsiveness issues

Site URL: https://www.opinionx.co/pricing2

I've built a pricing page using markdown blocks with custom code blocks. They work great on (1) large desktop screens and (2) vertical smartphone screens, but everything in-between causes a frustrating responsiveness issue -- the content becomes obscured as the blocks become skinnier and longer, until eventually they vertically stack.

Any suggestions as to what I can do to prevent this issue in the middle of screen sizes (seems to be from 1362px width down to 767px where the distortion occurs and the cards don't get stacked vertically). Example screenshot:

The page is https://opinionx.co/pricing2 and the password is just: 2

24 minutes ago, danielkyne said:

Site URL: https://www.opinionx.co/pricing2

I've built a pricing page using markdown blocks with custom code blocks. They work great on (1) large desktop screens and (2) vertical smartphone screens, but everything in-between causes a frustrating responsiveness issue -- the content becomes obscured as the blocks become skinnier and longer, until eventually they vertically stack.

Any suggestions as to what I can do to prevent this issue in the middle of screen sizes (seems to be from 1362px width down to 767px where the distortion occurs and the cards don't get stacked vertically). Example screenshot:

 

The page is https://opinionx.co/pricing2 and the password is just: 2

What do you think if we arrange them into 2 items in one row so the height of all items will be equal?

I'm just going to duplicate the section and set some custom CSS so the section with 4 side-by-side disappears from 1362px or smaller screen width and a new section appears with the 4 stacked vertically instead. Here's the code I'm using:

/* Vertical stacking of pricing options */
@media screen and (max-width:1362px) {
[data-section-id="62dec3c42f5a510e5d7c7d8a"]  {
    display: none;} 
}

@media screen and (min-width:1362px) {
[data-section-id="62dff2e31cf79a2bdb95364c"] {
    display: none;}
}

18 hours ago, danielkyne said:

Site URL: https://www.opinionx.co/pricing2

I've built a pricing page using markdown blocks with custom code blocks. They work great on (1) large desktop screens and (2) vertical smartphone screens, but everything in-between causes a frustrating responsiveness issue -- the content becomes obscured as the blocks become skinnier and longer, until eventually they vertically stack.

Any suggestions as to what I can do to prevent this issue in the middle of screen sizes (seems to be from 1362px width down to 767px where the distortion occurs and the cards don't get stacked vertically). Example screenshot:

 

The page is https://opinionx.co/pricing2 and the password is just: 2

The url doesn't exist