Docs

[Luff36]

Dear, my layout on mobile broke. I have no idea how this is resolved.
There’s a Giant “Row” traversing almost every page.
Please help me fix it again.

look at: https://www.opentest.co/share/14115ab0c0a411e693d2c326b54ba9c0

[Luff36]

This reply has been marked as private.

[Jade]

Hi there,

Would you mind providing us with your website URL so that we can check?

Thank you.

[Luff36]

This reply has been marked as private.

[Jade]

Hi there,

Thanks for that.

Is there any special reason why you have to add some empty columns with a huge negative margins in the section containers on the page? These are causing the issue on mobile. You can try adding this custom CSS:

@media (max-with: 767px) {
    .home #x-section-4 {
        margin: 0 !important;
    }
}

Hope this helps.

[Luff36]

Did not work! 🙁

[Jade]

Hi there,

It seems to be fine now when I checked the sections on Cornerstone since the empty sections with negative margins are removed.

[Luff36]

I have refactored the sections and it is already working, thank you.

[Luff36]

Thank you Jade!

[Luff36]

Jade,
Is there any way to change the size of the fonts in the mobile version just by the cornestone, or, do I have to do it through customizer (CSS)?
Still, how can I resize the header (logo and background) to mobile? I think it’s too big on the mobile version.

[Rad]

Hi there,

Yes, you’ll have to use customizer’s custom CSS, example,

Add this to your custom CSS,

@media ( max-width: 767px ) {

.font-size-14 {
font-size: 14px;
}

.font-size-16 {
font-size: 16px;
}

/* add more here */

}

Then simply add font-size-14 or font-size-16 to your target element’s Class input.

As for the logo, please add this as well

@media ( max-width: 767px ) {
.x-brand img {
    width: 90px;
}
}

Or you can simply add this CSS from the above CSS that I provided, merging them

.x-brand img {
    width: 90px;
}

Like this

@media ( max-width: 767px ) {

.font-size-14 {
font-size: 14px;
}

.font-size-16 {
font-size: 16px;
}

.x-brand img {
    width: 90px;
}

/* add more here */

}

It’s more cleaner that way.

Cheers!

[Luff36]

You guys are sensational! Excellent support!!!

Taking advantage, how can I make the highlight animation not work on smartphones. Just keep the phrase without animation!

Look at attach!

[Jade]

Hi there,

Disabling the effect in the text type element on mobile would require some customization. What I can suggest is that you can duplicate the Header section and replace the text type element with a custom headline element then place the text there. Then you can use the Hide based on screen width to set the duplicated section to be visible only on mobile. Do the same to the main header section with the text type elements as well but make it visible on desktop.

Hope this makes sense.

[Author]

Posts