Equal Button Width on Mobile View (for Link in Bio)

midnightumbrella · July 24, 2021

Site URL: https://www.midnightumbrella.com/links

Howdy, Squarespace friends!

Hope you can help me out...I’m trying to make a ”Link in Bio” page for me to direct my social media accounts to. However, as you can see in the attached image, I can’t seem to get my buttons on mobile view to be of equal width. I've tried a bunch of things, but I'm not having any luck. Any suggestions would be greatly appreciated! 🙌

Also, I’m currently injecting this page header code:

<style>
  #header, footer {
  display: none!important;}
@media only screen and (min-width: 767px){  
.sqs-block-button-element--medium {width: 90%; !important;}
  } 
</style>

Thank you, friends! ❤️ 🙌

tuanphan · July 25, 2021

Add to Design > Custom CSS

/* Links bio button same width */
@media screen and (max-width:767px) {
div#page-section-60f99c9919ec6730abe0ca1c .button-block a {
    min-width: 200px;
}
}

midnightumbrella · July 25, 2021

7 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Links bio button same width */
@media screen and (max-width:767px) {
div#page-section-60f99c9919ec6730abe0ca1c .button-block a {
    min-width: 200px;
}
}

Incredible, thank you @tuanphan! You’re a hero! A legend! 🙌