Side-By-Side Button Alignment

Site URL: https://thisplusthat.com/

Hey, y'all.

Here's my site.

I used the custom footer code injection from this kind person to try and solve for weird spacing between side-by-side buttons on Squarespace in the hero image area of my home page.

I like how it looks now, except for a couple of things:

1. It doesn't fit the full container. I'd love for them to be equidistant so that the left-most button aligns to the left side of the white block above it, and the right-most button aligns with the right side of the white block above it, with equal space between each button.
2. When I go to mobile, all of the buttons stack to the left on top of each other. This isn't horrible to me, but I'm wondering if there's some way to keep them all in the same row on mobile without the buttons becoming too small.

Does anyone know any custom code to solve for these issues?

Or, do you know another way to code this instead of the custom footer injection code in order to meet all of these desires?

Thanks for your help in advance!

#1. Don't remove any code in your current code. Add this to Design > Custom CSS

/* Hero buttons */
@media screen and (min-width:768px) {
div#page-section-619681c2193b52305fa7d234 {
.sqs-block {
    padding-left: 0;
    padding-right: 0;
}
.row {
    display: flex;
    justify-content: space-between;
}
.row:after, .row:before {
    display: none;
}}}

#2. Use this CSS

/* Hero buttons mobile */
@media screen and (max-width:767px) {
div#page-section-619681c2193b52305fa7d234 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-619681c2193b52305fa7d234 .span-3 a {
    text-align: center;
    min-width: 100px;
}}

8 hours ago, tuanphan said:

#1. Don't remove any code in your current code. Add this to Design > Custom CSS

/* Hero buttons */
@media screen and (min-width:768px) {
div#page-section-619681c2193b52305fa7d234 {
.sqs-block {
    padding-left: 0;
    padding-right: 0;
}
.row {
    display: flex;
    justify-content: space-between;
}
.row:after, .row:before {
    display: none;
}}}

#2. Use this CSS

/* Hero buttons mobile */
@media screen and (max-width:767px) {
div#page-section-619681c2193b52305fa7d234 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-619681c2193b52305fa7d234 .span-3 a {
    text-align: center;
    min-width: 100px;
}}

 

As always, @tuanphan, you are a hero. THANK YOU!