Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


andresjassawda

Question

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;
}

 

Edited by andresjassawda
edit text
Link to comment

8 answers to this question

Recommended Posts

  • 1

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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: 

image.png.e67aa313d3252670c3219a8b5f4ae046.png

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

image.png.fac83ce52cd43259437c259fe637323d.png

 

 

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

Link to comment
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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%;
}
}

image.thumb.png.cc803a76a9226c2893eab7394bed4ddd.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...