CMS Development

Shaykoo
Participant

CTA button alignment horizontally in the center

SOLVE

Hi, I am facing issues in putting two CTA align horizontally in the center. I am attaching images.This is what I need to displayThis is what I need to displayAnd this is what I have done but it's not displaying the desired resultsAnd this is what I have done but it's not displaying the desired results

0 Upvotes
2 Accepted solutions
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

CTA button alignment horizontally in the center

SOLVE

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.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

View solution in original post

dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

CTA button alignment horizontally in the center

SOLVE

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

 

View solution in original post

6 Replies 6
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

CTA button alignment horizontally in the center

SOLVE

Hey @Shaykoo,

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
Shaykoo
Participant

CTA button alignment horizontally in the center

SOLVE

This is the result @Kevin-C

 

the pink button is going too left "Get a demo" button is aligned rightthe pink button is going too left "Get a demo" button is aligned right

 

 

0 Upvotes
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

CTA button alignment horizontally in the center

SOLVE

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.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
dennisedson
HubSpot Product Team
HubSpot Product Team

CTA button alignment horizontally in the center

SOLVE

@Shaykoo, do you have link to this page?

0 Upvotes
Shaykoo
Participant

CTA button alignment horizontally in the center

SOLVE
0 Upvotes
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

CTA button alignment horizontally in the center

SOLVE

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