[Resolved] Images Responsive

[Leo]

So you want to remove the padding for mobile?

Can you disable the maintenance page again?

[Giuseppe]

I want bigger images on the mobile, because every page has at the beginning of the text, this text is actually an image that acts as a hook (marketing), the problem is that these images (text) are seen tiny by the mobile.

In the home, for example, the first words you see written are an image (for example: Problemi con la tua caldaia?), is an image that see tiny from mobile devices.

I want to solve this problem.

Site is open.

[Leo]

This is what I see on mobile and it’s not tiny:
https://www.screencast.com/t/R0BaeWzC5

Is this not what you are seeing? That’s exactly how a responsive image work.

Perhaps it’s better to use text instead of an image?

[Giuseppe]

but the padding-right =40px and padding-left =40px
for the mobile version
is automatically assigned by generatepress?

[Leo]

You can remove it with this CSS:

@media (max-width: 768px) {
    body .generate-sections-inside-container {
        padding-left: 0;
        padding-right: 0;
    }
}

[Giuseppe]

I tried the result does not satisfy me.

Maybe I need to create different images:
an image with the dimensions for the desktop site, the same image with dimensions set for the mobile site.
But how do I make different images appear depending on the device with which the site is displayed?

Thanks

[Leo]

You can do it like this:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

If it’s for text, I would recommend simply using text instead of image of texts.

[Giuseppe]

I used this code in simple css plugin :

@media (max-width: 768px) {
/* CSS in here for mobile only */
HERE I entered the path of the image with dimensions set for mobile
}

@media (min-width: 1025px) {
/* CSS in here for desktop only */
HERE I entered the path of the image with dimensions set for desktop
}

But where I saved in simple css, the paths I entered are not saved and are deleted

What am I doing wrong?

Thanks

[Leo]

Instead of using CSS, use the built-in hide-on classes I linked above to hide certain images on certain resolution.

[Giuseppe]

Ok but I can’t figure out how to do it ..

For example I have two images that are the same but different in size, I want one to appear on the desktop version and the other I want it to appear on the mobile version site.

How should I use the code you indicated to me (hide-on) and where should I enter it (on the page or in the simple css)?

How should i write the code and where should i write it?

Thanks

[Leo]

This would be your HTML content, no CSS required:

<img src="https://DESKTOP-IMAGE-URL" class="hide-on-mobile">
<img src="https://MOBILE-IMAGE-URL" class="hide-on-desktop hide-on-tablet">

[Giuseppe]

EUREKA!!

Thank you so much Leo.

One last piece of advice, according to you, SEO side, would it be a mistake to give the two images the same ALT TAG and the same TITLE TAG?

Thanks Leo

[Leo]

Glad I could help!

I can’t really comment on this Alt tag and Title tag as I’m not an expert in SEO.

I would recommend Googling a bit to see what others say 🙂

[Giuseppe]

Thank you again Leo!

[Leo]

No problem 🙂

[Author]

Posts