Docs

[zr1007]

I’m currently revamping our website using x theme, I would like to have our buttons side by side on mobile. See attachment, the image to the right is the old site. On the Left is the new X theme, but as you can see it doesn’t look right. thanks

[Lely]

Hi There,

Thanks for the screenshot! To assist you with this issue, we’ll first need you to provide us with your URL where the button is. 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.

[zr1007]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the link. We can make two link on a row and not all four. There’s not enough space to display all four buttons in one row. On the block grid element class field, please add custom-block-grid. Then add the following CSS on Settings Tab > Custom CSS:

@media (max-width: 480px){
.x-block-grid.four-up.custom-block-grid>li {
    width: 47.5%;
}
.x-block-grid.four-up>li:nth-child(2) {
    margin-top: 0;
}
}

Hope this helps.

[zr1007]

This reply has been marked as private.

[zr1007]

This reply has been marked as private.

[Zeshan]

Hi there,

Thanks for writing back!

if you want to show three buttons in a line, add following CSS under Custom > CSS in the Customizer:

@media (max-width: 480px){
.x-block-grid.four-up.custom-block-grid>li {
    width: 33%;
}
.x-block-grid.four-up>li:nth-child(2n+1) {
    clear: none;
}
.x-block-grid.four-up>li:nth-child(3) {
    margin-top: 0;
}
}

Thank you!

[zr1007]

This reply has been marked as private.

[Christopher]

Hi there,

Please update previous code to :

@media (max-width: 480px){
.x-block-grid.three-up>li:nth-child(2), .x-block-grid.three-up>li:nth-child(3) {
    margin-top: 0;
}
.x-block-grid.three-up>li:nth-child(2n+1) {
    clear: none;
}
.x-block-grid.three-up.custom-block-grid>li {
    width: 33%;
}
}

Hope it helps.

[zr1007]

perfect! it worked! thank you very much!!!

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts