[Resolved] landscape to portrait switch of static image on mobile

[t29k75]

I have two static images added in content on my homepage, in landscape mode.
I would like to have them switched to portrait orientation, but on mobile only.
Is there some solution to achieve that?

thanks,
Tibor

[David]

Hi there,

you would have to add 2 x Image blocks one for Landscape and one for Portrait.
Then select each image block and use the hide-on-* classes in GP to hide each image on the different devices.

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[t29k75]

Hi David,

I didn’t think about that option:) Clever.
I quickly did what you suggested on my local site and it works.
Only thing I would like to adjust is breaking point between mobile & tablet. Using inspector tool I can see that images are swapping from 768 to 769px.
Mobile image (portrait) is still on 768px screen (I believe iPads are 768px wide) and desktop img shows from 769px. I would like to have desktop image (landscape) exactly from 768px.

Any chance to change the breaking point from 768px/769px to 767px/768px ?
thanks,
T

[Elvin]

Hi there,

Are you trying to change the breakpoint of hide-on-* classes?

If that’s the case, you’ll have to edit the theme/plugin’s CSS to do that. (not recommended)

These are the default – https://docs.generatepress.com/article/responsive-display/

If you wish to have a modified version of this, it may be better to write your custom @media rule for breakpoints.

Example:

@media (max-width: 767x) {
img-hide-on-mobile {
display:none;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
img-hide-on-tablet {
display:none;
}
}

@media (min-width: 1025px) {
img-hide-on-desktop {
display:none;
}
}

And then use img-hide-on-* classes. You can modify the @media rule for preferred breakpoints. 😀

[t29k75]

Hi Elvin,

I copy/pasted custom @media rules for breakpoints to style.css.
Added img-hide-on-mobile to horizontal img and img-hide-on-desktop img-hide-on-tablet to vertical img.
Somehow, it doesn’t work. Both images are visible on all three devices.
Tried with display:none !important; as well and cleared the cache.

T

[Elvin]

Ah my bad. It was missing . indicators for the selectors. Try this:

@media (max-width: 767x) {
.img-hide-on-mobile {
display:none;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
.img-hide-on-tablet {
display:none;
}
}

@media (min-width: 1025px) {
.img-hide-on-desktop {
display:none;
}
}

[t29k75]

When I changed and added dot before img-hide-on-* in css, desktop and tablet shows correct image.
Only on mobile there are still both images.

T

[Elvin]

You may have to play around with @media values.

Ideally I’d use these instead: @media (max-width: 768x) (for mobile) and @media (min-width: 769px) and (max-width: 1024px) (tablet)

But then again, all of this won’t be necessary if that’s what you’re going to use because the default hide-on-* classes uses the same breakpoints as shown here – https://github.com/tomusborne/generatepress/blob/2c7c8a76d3b58b0b97e82b3a7a5ebf022a1ddfbe/assets/css/main.css#L1555-L1558
https://github.com/tomusborne/generatepress/blob/2c7c8a76d3b58b0b97e82b3a7a5ebf022a1ddfbe/assets/css/main.css#L1628-L1638

Unless you’re using Floats on Appearance > Customize > General which will then use this – https://github.com/tomusborne/generatepress/blob/2c7c8a76d3b58b0b97e82b3a7a5ebf022a1ddfbe/assets/css/all.css#L57-L60

Can you link us to the page containing the images you’re working on? To check why it isn’t working.

[t29k75]

I was playing with all this locally using MAMP. I just add it to live site (see link in private window).
T

[David]

Might be easier to start over to make it easier 🙂

@media(max-width: 769px) {
    .lg-screen {
        display: none;
    }
}
@media(min-width: 770px) {
    .sm-screen {
        display: none;
    }
}

For the large screen image add class: lg-screen
For the smaller screen image add class: sm-screen

[t29k75]

Guys,

your last suggestion did the trick! I just adjusted those pixels to 767 and 768.

I believe those extra images will add to overall size of the page even thou they are hidden at some point. Correct?
Maybe silly request, but would it make sense & be hard to code it for you to GB in the future that we will be able to choose/change orientation of static img for mobile (going from horizontal to vertical) and somehow save some kilobytes?
…or that’s Gutenberg area?

thanks for your help again, I mark it as resolved.
have a great day,

Tibor

[David]

The browser generally ignores making requests for hidden elements. You can check this in the Browser > Developers tools Network tab ( make sure caches are cleared ).

Different orientation / cropping of images is known as Art Direction. The HTML <img> element doesn’t support that, its a one size fits all solution. But the newer <picture> element does support it. We’re kind of hoping that WP adds picture support in the future, as wherever we can, we try to use core functions 🙂

Might be something we review in the future if WP doesn’t get on board.

Glad to be of help.

[Author]

Posts