Archived topic

Hero Element - Mobile Lager

3 replies · Started by Leanne on September 15, 2022

Viewing posts 1–4 of 4

September 15, 2022 at 4:47 pm #2344268

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

September 15, 2022 at 4:54 pm #2344270

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;
    }
}

September 15, 2022 at 4:59 pm #2344274

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

September 15, 2022 at 6:00 pm #2344309

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/

This archived topic is closed to new replies.

Start building better websites today.