[Resolved] Different main image for mobile resolution

[abakis s.r.o.]

Hi,

I would like to have different picture on a mobile resolution (most likely square dimension). How to set it up – to display different main picture on the desktops and tablets and on a mobile?

Thank you for your help 🙂

Rudy, IT POMOC

[Leo]

Hi there,

By main image are you referring to the featured image of that page?

Let me know 🙂

[abakis s.r.o.]

Hi Leo,

I am not sure, what are you asking on 🙂

The only thing, what I want is, to display a square image on a mobile resolution. I´ve implemented a MetaSlider. But on a mobile resolution it doesn´t look good (it is very slim and barely readeable).

I don´t know much about CSS styling, but I would like to put somewhere some condition, which would say:
– if the page is loaded on a resolution wider than 768 pixels, it displays regular Meta Slider [metaslider id=”306″],
– but when the resolution is below 768 pixels, it would load a different slider (I haven´t created it yet, but it would have just different ID).

I don´t know how to write such a code (as I don´t know CSS) and where should I place it? Should I place it in a “hook”, which I have already created for the current Meta Slider?

The page, about which I am speaking is: https://www.kamerove-systemy.eu/

Thank you very much for your help. I appreciate it a lot 🙂

Rudy, IT POMOC

[David]

Hi there,

try adding this CSS:

@media (max-width: 768px) {
    .flexslider .slides img {
        min-height: 300px;
        object-fit: cover;
    }
}

[abakis s.r.o.]

It worked. Thank you very much 🙂

Have an awesome day 🙂

Rudy, IT POMOC

[David]

You’re welcome

[Author]

Posts