Mobile headline line height and menu button

[Antoniusz]

Hi,

I have setup my font size to be responsive, but when on mobile the main headline has big gaps between each line. I assumed this is because the font size gets smaller but line height stays the same.

Also I can’t get the menu button to move. It’s stuck to the right side of the screen and it’s not centered.

This is how it looks on mobile:

Summary

website url: antonioscardovi.com

[tristup]

Hi Antonio,

It seems that the Line Height attribute value is written in the custom CSS code, I would suggest you add the following code into Customize > Element CSS of that specific Headline element.

@media  (max-width: 480px) 
{
    $el.x-text .x-text-content-text-primary
    {
        line-height: 0.9 !important;
    }
}

And the Humberger menu is set to right to adjust the space with the Logo, if you still want that in the center, please add the following custom CSS code into the Theme Options > CSS.

@media  (max-width: 978.98px) 
{
    .masthead-inline .x-btn-navbar
    {
        float:none !important;
    }
}

You may need to adjust the breakpoints as per your need, please find the detailed article here: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide custom codes that mean we can’t fix it if it conflicts with something on your site nor will we enhance it.

Thanks

[Antoniusz]

That worked for the headline. I decided to keep the menu button as it is though.

Thank you

[tristup]

Hi Antonio,

Glad that we are able to help you.

Thanks