Docs

[xdalex09]

I have a series of buttons navigating to various portions of the page. On desktop it looks great. But on mobile, it seems to be an issue and just looks very messy when it goes into the default single column. Can I have multiple columns in the mobile view or force certain sections to remain the same on mobile?

Screenshots attached.

[xdalex09]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! Instead of adding those buttons on a columns (1/2, 1/3, 1/4), please use the Block Grid element instead. That means you need to set your columns to 1 and let the block grid serve as the button container, with that said you need to use the Button Shortcodes.

Unlike columns, block grid stays inline when viewed on mobile.

Hope it helps, Cheers!

[xdalex09]

So I tried the block grid, however when I turn the button CSS to block=”true” to achieve the same look, then it does the same stacking behavior as normal columns.

[Joao]

HI There,

My reccomendation for you would be to add a 10 or 15px gap under each button.

That way when they stack on mobile there will be some spacing and it will look much better.

Alternatively you could hide that section for mobiles and and create a different design for mobile and hide on desktop laptop and tables.

Hope it helps

Joao

[xdalex09]

So no way to get 2-4 buttons in the same row on mobile?

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[xdalex09]

This reply has been marked as private.

[Joao]

Hi There,

I have added the class : fourbuttons to the row where you have 4 buttons and threebuttons to the row where you have 3 buttons, than I added the following code to Cornerstone Custom CSS

@media (max-width: 769px) {
.x-container.fourbuttons .x-column.x-sm.x-1-4 {
  max-width: 20% !important;
  float: right;
  margin: 10px;
  text-align: center;
}
.x-container.fourbuttons .x-column.x-sm.x-1-4 .x-btn {
  font-size: 10px
}
@media (max-width: 769px) {
.x-container.threebuttons .x-column.x-sm.x-1-3 {
  max-width: 28% !important;
  float: right;
    margin: 10px;
  text-align: center;
}
.x-container.threebuttons .x-column.x-sm.x-1-3 .x-btn {
  font-size: 10px
}
}

Hope it helps

Joao

[xdalex09]

This reply has been marked as private.

[Christopher]

Hi there,

Please update this code :

.x-container.fourbuttons .x-column.x-sm.x-1-4 {
  max-width: 20% !important;
  float: right;
  margin: 10px;
  text-align: center;
}
.x-container.threebuttons .x-column.x-sm.x-1-3 {
  max-width: 28% !important;
  float: right;
    margin: 10px;
  text-align: center;
}

To :

.x-container.fourbuttons .x-column.x-sm.x-1-4 {
    max-width: 21% !important;
    float: right;
    margin: 2%;
    text-align: center;
}
.x-container.threebuttons .x-column.x-sm.x-1-3 {
    max-width: 29.33% !important;
    float: right;
    margin: 2%;
    text-align: center;
}

Hope it helps.

[xdalex09]

Thanks that did it.

[Jade]

You’re welcome.

[Author]

Posts