Global element wraps on phone

[GeorgiaG]

Hi there. I have a global element that wraps on the phone instead of displaying inline. It is on this page and is under the first photo on the left. The global element is a button and three graphics.
https://learnkayaking.blueotter.com/test/

to test it I found the element and added display: inline block to the css but it didn’t help.

Is there a way to force that to stay inline? thank you.

[nabeel]

Hi @GeorgiaG,

Thank you for reaching out to us. I see you’re using columns in your global block so they will stack up in smaller devices. To force them remain inline, give your Global Block’s section a class e.g g-block and then add the following code in the Global Block’s CSS section

@media screen and (max-width: 767px) {
    .g-block .x-column {
        width:  auto !important;
        display: inline-block !important;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[GeorgiaG]

Thank you very much @Nabeel. Is there a way for this view I can also specify that the images are a smaller width or that the padding is less?

[GeorgiaG]

Hi @Nabeel. I used your class and added img to it and got it to work. Thank you for getting this working for me. It is great! Best.

[friech]

We are delighted to assist you with this.

Cheers!