Mobile resizing issues of widgets and headers

[breanndick]

Hello! Is there anyway to make my website more mobile friendly? The title of one of the widgets is getting cut off and overall everything is oversized on mobile.

Also the main image of my header gets cut off a lot on mible.

www.breanndick.com

thanks!

[breanndick]

I actually fixed the widget issue but the intro paragraph text and the main header image are still much too large on mobile. How can i adjust these?

[thai]

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

@media (max-width: 320px){
    .el4.x-text {
        font-size: 24px !important;
    }
}

Let us know how it goes!

[breanndick]

Thanks! This fixed the font perfectly. How can I shrink the size of my header background image for mobile?

[christian]

Hey @breanndick,

What do you want it to look like? If you shrink it, it would look like this.

Your current background is set to cover and that is by default and the standard usage of background images. If you use other values, it would look like my screenshot. You can achieve different background sizes by setting up different bars and hiding them based on screen width. The other method would require custom CSS which would be getting into custom development.

Thanks.

[breanndick]

Understood. Time to start learning CSS! Thank you!

[Joao]

Hi There,

If you wish to learn CSS I recommend you a series called CSS Basics from the channel DevTips on Youtube.

Trevor is super fun and his material is really good, you will have a great time

Hope it helps!

[breanndick]

Awesome, thanks for the recommendation!

[ruenel]

You are most welcome!