Different main image for mobile resolution

Hi there,

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

Let me know :)

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

Hi there,

try adding this CSS:

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

It worked. Thank you very much :)

Have an awesome day :)

Rudy, IT POMOC

You're welcome