How can I make two buttons appear next to each other in the same row?

Site URL: https://moose-tangerine-ybng.squarespace.com/

Greetings, I would like to have my "Learn more" and "sign-up" buttons appear in the same row, I've tried implementing CSS but I cannot get it to work. 

This is what I have so far:

Quote

#block-yui_3_17_2_1_1610138343957_381[class*=sqs-block-button-container] {
  text-align: right;
}
#block-yui_3_17_2_1_1610138343957_388[class*=sqs-block-button-container] {
  text-align: left;
}

They appear to me to be in the same row without the need for additional CSS.

Ah I think I see. Not so much on mobile? Is that were the issue is?

Hey @creedon, sorry I should of stated the fact that I was looking for help for mobile screens, so yes you are correct. I would like to get those side-by-side, next to eachother. 

Add the following to Design > Custom CSS.

@media screen and ( max-width: 767px ) {

  #page-section-5ff8a6bb15099227a9193870 .row:first-child .row:first-child {
  
    display: flex;
    justify-content: space-around;
    
    }
    
  #page-section-5ff8a6bb15099227a9193870 #block-yui_3_17_2_1_1608238474701_6930 .sqs-block-button-element {
  
    width: 65.7344px;
    
    }
  }

Let us know how it goes.

Thank you sir, you have solved my problem. Appreciate all the help. 

@creedon, Sorry to ask again, I have another question.

To my understanding, I assumed using the CSS you provided would allow me to further customize the size of the buttons and/or text size inside the buttons (they both seem to work similarly, ie. changing the size of the button.) in desktop view. However when I do that, I ruin how the buttons look, like such: 

Is there any way to restrict the global button settings from affecting my mobile view? To keep it originally as this:

Thank you again for the help or tips you can provide to help me solve this issue.  

59 minutes ago, andresjassawda said:

I assumed using the CSS you provided would allow me to further customize the size of the buttons and/or text size

Um no. The CSS I provided was based on whatever settings you had at that time. If you change things then the CSS pretty much goes out the window.

1 hour ago, andresjassawda said:

Is there any way to restrict the global button settings from affecting my mobile view? To keep it originally as this:

That may be possible but off the top of my head I don't have a solution.

@andresjassawdaI see on tablet, this button doesn't look good.

You can add this to Custom CSS to increase button width

/* tablet button */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5ff8a6bb15099227a9193870 .span-12 .span-5 {
    width: 50%;
}
div#page-section-5ff8a6bb15099227a9193870 .span-12 .span-7 {
    width: 50%;
}
}