Docs

[marketcampus]

I recently built some pricing tables and wanted to customize the buttons. What I did was create a <div class=”pricingbutton”> and put the buttons inside that div (all within the text edit box in the pricing table). Everything works however I can’t seem to figure out the width.

Currently, I have the following CSS on my buttons:

.pricingbutton .x-btn {
 background-color: #018afe;
  border-color: #018afe;
  color: #fff;
  width: 250px;
}

I originally had the width at 350px but on mobile they would extend past the screen. I then tried 100% but the buttons (even on desktop) would extend past the pricing table. Is there a way I can make these buttons the “full block width” and still be mobile friendly?

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[marketcampus]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the URL. Please update above CSS to this:

.pricingbutton .x-btn {
    background-color: #018afe;
    border-color: #018afe;
    color: #fff;
    width: 100%;
    margin: auto;
}

Hope this helps.

[marketcampus]

So technically it does work but there doesn’t seem to be any padding around the edges? It looks odd how it goes right up to the edge of the column. I basically want the buttons to look and function like the normal buttons with the “Block” option turned on. I’ve attached a screenshot of what it looks like with that code above plugged in.

[Joao]

Hi There,

Try width: 90% instead of 100%

Let us know how it goes,

Joao

[marketcampus]

There we go! Perfect! Thanks!

[Friech]

Glad we could help, Cheers!

[Author]

Posts