CTA button alignment horizontally in the center

SOLVE
Highlighted
Occasional Contributor

Hi, I am facing issues in putting two CTA align horizontally in the center. I am attaching images.Screenshot 2018-11-13 at 1.39.44 PM.pngThis is what I need to displayScreenshot 2018-11-13 at 1.40.27 PM.pngAnd this is what I have done but it's not displaying the desired results

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Regular Contributor

Withou a live demo this is tough to diagnose.

 

Try this:

In the drag and drop editor, select the CTA on the left.
Then in the Styling Editor (right panel) find the "inline styling" input and paste this css: float: right;

 

This will tell that element to floar to the right of its congainer.  Now ensure you're testing on a mobile device as well as a desktop as this solution may not have the desired outcome across the two.

Advisor | Platinum Partner

@Shaykoo,

#hs_cos_wrapper_module_1542063417088224_ {
    text-align: right;
}

that is for above 767px

i would add a media query

@media (max-width: 767px){
  #hs_cos_wrapper_module_1542063421717226_, #hs_cos_wrapper_module_1542063421717226_ {
    text-align: center;
  }
  #hs_cos_wrapper_module_1542063421717226_{
    margin-top: 10px;}
}

just a heads up, you have some overflowing elements that you will want to address as well

 

good luck out there,

 

dennis
6 Replies
Regular Contributor

Hey @Shaykoo,

Could you get us an image of what the results are? And maybe a live demo?

Reply
0 Upvotes
Occasional Contributor

This is the result @Kevin-C

 

Screenshot 2018-11-13 at 8.17.18 PM.pngthe pink button is going too left "Get a demo" button is aligned right

 

 

Reply
0 Upvotes
Advisor | Platinum Partner

@Shaykoo, do you have link to this page?

dennis
Reply
0 Upvotes
Advisor | Platinum Partner

@Shaykoo,

#hs_cos_wrapper_module_1542063417088224_ {
    text-align: right;
}

that is for above 767px

i would add a media query

@media (max-width: 767px){
  #hs_cos_wrapper_module_1542063421717226_, #hs_cos_wrapper_module_1542063421717226_ {
    text-align: center;
  }
  #hs_cos_wrapper_module_1542063421717226_{
    margin-top: 10px;}
}

just a heads up, you have some overflowing elements that you will want to address as well

 

good luck out there,

 

dennis
Regular Contributor

Withou a live demo this is tough to diagnose.

 

Try this:

In the drag and drop editor, select the CTA on the left.
Then in the Styling Editor (right panel) find the "inline styling" input and paste this css: float: right;

 

This will tell that element to floar to the right of its congainer.  Now ensure you're testing on a mobile device as well as a desktop as this solution may not have the desired outcome across the two.