Preventing overlapping buttons on 7.1 FE

Hi everyone!

How can I prevent side-by-side buttons from overlapping on smaller screen sizes (screenshot attached)? Clearly, there's something preventing side-by-side text boxes from overlapping (the white 'buttons') so what is it and how can I apply it to the actual buttons (the red outline buttons)?

Thanks in advance!

PW: demo

Can you share your website URL?

Generally the reason buttons overlap in 7.1 FE is that the button blocks are overlapping in the grid. In this case it may be that, or it may be that the text is too long and that is causing the buttons to overlap.

Oh I'm sorry! I was sure I put in the URL. It's

https://invivocue.squarespace.com/human-immune-system-mouse-himice

Noted on what you're saying about the text being long but it works fine when it's a text box. So why do the buttons overlap instead of defaulting to the same layout at the text boxes?

3 hours ago, MJohn said:

Noted on what you're saying about the text being long but it works fine when it's a text box. So why do the buttons overlap instead of defaulting to the same layout at the text boxes?

I'm not really sure why buttons wouldn't word-break like a text box, but that doesn't strike me as a particularly great solution because of the readability of broken words.

You could try this CSS that will vary the font size based on the viewport width, and hopefully prevent the worst of the overlapping:

@media only screen and (min-width:768px) and (max-width:1200px) {
  section[data-section-id="6384c31766ef155fd6128ff2"] { 
    .sqs-button-element--secondary {
      font-size: 1.5vw !important;
    }
  }
}