[Support request] Hero Element – Mobile Lager

[Leanne]

Hi,

I have a slider inside a header (hero) element. It works great. However we would like to have it larger from top to bottom on a mobile device. I am ok with it cutting of some of the slider on the right and left, just need it to be taller on a phone.

Here is a screenshot of what I am looking for.

https://snipboard.io/C0gvKT.jpg

Can this be done?

Thanks,
Leanne

[Ying]

Hi Leanne,

You can try adding this CSS, but this is not something that the theme can control, for more customization, it’s better to contact the plugin support 🙂

@media (max-width: 768px) {
    body .page-hero .metaslider .flexslider .slides li img {
        min-height: 100vh;
        object-fit: cover;
    }
}

[Leanne]

Hi,

I contacted you becuase I thought it would be a hero element issue not a metaslider issue.

That helped some, but the text on the slider is still small. It did not go bigger with the image.

Do you have a suggestion? If not, I will contact Meta Slider for support.

Thnaks,
Leanne

[Fernando]

Hi Leanne,

What you can do is the add a Font rule in the Typography Manager in Appearance > Customize > Typography. Set the target element to Custom – .page-hero. Then, set the typography to your preference: https://docs.generatepress.com/article/dynamic-typography-overview/

[Author]

Posts