Stop buttons from overlapping

Is there a way to make sure my buttons don't overlap and are evenly spaced when the screen gets smaller? Thank you!
Page: https://www.52launch.com/our-services

Hi,

How about forcing these to 2 rows on smaller screens? We can give code to achieve this

That could work! But I'm not sure if it will help with the uneven spacing that is also happening

Actually to make same spacing, we will need to use Code Block to recreate these buttons. If you want to test this, let me know, we will give the code

That would be great! Thank you

Thank you!! So so close. It's looking a lot better, however because the word "manufacture" is longer than the other words, the button is overflowing into the space to the left and right of it instead of pushing the other buttons a little to the side to make even spacing between the buttons. It would be perfect if that word wasn't longer than the others. Is there anything that would prevent that from happening?

I got it working for the most part by adding

width: 100%;
margin-left: 5%;
margin-right: 5%;

within .button-code-block a . I'm not an expert so let me know if that will work consistently or if there's a better way. Now I just need the piece to make it stack on a smaller screen size

On 8/10/2023 at 8:51 PM, jess_h said:

I got it working for the most part by adding

width: 100%;
margin-left: 5%;
margin-right: 5%;

within .button-code-block a . I'm not an expert so let me know if that will work consistently or if there's a better way. Now I just need the piece to make it stack on a smaller screen size

 

It looks fine to me

With smaller screen, add this to bottom of Code Block

<style>
  @media screen and (max-width:1024px) and (min-width:768px) {
  .button-code-block .button-block {
    width: 50% !important;
    margin-bottom: 20px;
}
.button-code-block {
    flex-wrap: wrap;
}

  }
</style>