Docs

[bak]

Hi there

1) How can I reduce the button width if they are set up in a block grid?
2) How can I manage the width of the gap between the buttons?
3) On mobile How can I hve the buttons centered or else full width?
4) On mobile, why is the H1 centered whilst it actually is left aligned on desktop?

[bak]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for logging in!

1] When you set the button as block, the width will be 100% and will be the same width of the container of the button. In your setup, you have a block grid which you set the width to 200 pixels. If you want to increase the width of the button, also need to increase the width of it’s container. Please try to increase the 200 to 250 or 300 in pixels.

2] The gap of the buttons is relying on the gap of the block grid items. The default gap is 5%. If you want to override it, you can make use of this code by inserting in the settings tab, Settings > Custom CSS

.x-block-grid>li {
    margin-right: 5px;
}

3] To make sure that the buttons are center on smaller screens, you can make sure this code;

@media(max-width: 979px){
  .x-block-grid {
      text-align: center;
      margin: 0 auto;
  }

  .x-block-grid-item {
      width: 100% !important;
  }
}

4] The h1 is centered on smaller screens because you have added this code in your child theme’s style.css file

@media (max-width: 767px){
  .left-text, .right-text {
    text-align: center !important;
  }
}

Hope this helps.

[Author]

Posts