2 Buttons Side by side

Site URL: https://www.purplehs.com/hs8

How can I have these two buttons (Learn More and Sign Up) next to each other on mobile? I've tried everything from posts I've read and haven't figured out how to do this.

Can anyone help?

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-62c57fc1f9f91a0d1160e037 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

3 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-62c57fc1f9f91a0d1160e037 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

 

Thank you so much Tuan! They're side-by-side on mobile now. 

One more thing if I may --- how do I get them to be the same size? They're now different heights on mobile.

Thanks again. You're amazing. 

@tuanphan Thank you so much Tuan! They're side-by-side on mobile now. 

One more thing if I may --- how do I get them to be the same size? They're now different heights on mobile.

Thanks again. You're amazing. 

3 hours ago, PurpleHS said:

@tuanphan Thank you so much Tuan! They're side-by-side on mobile now. 

One more thing if I may --- how do I get them to be the same size? They're now different heights on mobile.

Thanks again. You're amazing. 

Use this new code

@media screen and (max-width:767px) {
div#page-section-62c57fc1f9f91a0d1160e037 .span-6 {
    width: 50% !important;
    float: left !important;
}
div#page-section-62c57fc1f9f91a0d1160e037 .button-block a {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
}

@tuanphan Thank you! That worked great! The only problem is now they look too large. I wonder if adjusting the horizontal padding for just those two buttons would fix the issue. Is there a way to adjust the horizontal padding for just those 2 buttons so that the "LEARN MORE" is all on one line?

@tuanphan I tried the code below. I'm not sure if it's okay because I know nothing about CSS or anything related to code. Do I need to do something different?

@media screen and (max-width:767px) {
div#page-section-62c57fc1f9f91a0d1160e037 .span-6 {
    width: 50% !important;
    float: left !important;
}
div#page-section-62c57fc1f9f91a0d1160e037 .button-block a {
  padding-left: 0.75em !important;
  padding-right: 0.75em !important;
   padding-top: 1em !important;
  padding-bottom: 1em !important;
  display: flex;
  align-items: center;
 justify-content: center;
}
}

6 hours ago, PurpleHS said:

@tuanphan I tried the code below. I'm not sure if it's okay because I know nothing about CSS or anything related to code. Do I need to do something different?

@media screen and (max-width:767px) {
div#page-section-62c57fc1f9f91a0d1160e037 .span-6 {
    width: 50% !important;
    float: left !important;
}
div#page-section-62c57fc1f9f91a0d1160e037 .button-block a {
  padding-left: 0.75em !important;
  padding-right: 0.75em !important;
   padding-top: 1em !important;
  padding-bottom: 1em !important;
  display: flex;
  align-items: center;
 justify-content: center;
}
}

 

The code is fine.

Did you fix or still need help?