[Resolved] Images Responsive

[Giuseppe]

Hi guys,

How can I make images reactive, depending on the device with which the site is displayed?

In the desktop version of the site the images are seen correctly, the problem is when I view the site in the other versions (mobile, etc.)

Thanks in advance

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Giuseppe]

Hi Leo,

for example on the home page, how can I make the first image bigger when I see the site from mobile?

[Leo]

Looks like it’s as big as it can get with the padding?
https://www.screencast.com/t/Qb63YcDwB

[Giuseppe]

Excuse me, so what should I do to solve the problem in the mobile version?

[Leo]

That should be what’s showing on the mobile no?

I just used browser resize there.

Can’t see it anymore as the site is under maintenance mode.

[Giuseppe]

Hi Leo,

the site is opened but I don’t understand what I have to do to solve the problem.

Thanks

[Leo]

I’m not exactly sure what the problem is – from what I can tell, the image is as big as it can get on mobile:
https://www.screencast.com/t/Qb63YcDwB

Is that not what you are seeing?

Let me know 🙂

[Giuseppe]

I change the question so maybe I can understand.

How can I assign different dimensions to an image, based on the device with which it is displayed?

[Leo]

Generally you just want to leave it responsive like you currently have now.

If you want to set specific widths, then something like this might help:
https://stackoverflow.com/questions/15685666/changing-image-sizes-proportionally-using-css

To target mobile devices, this might help:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

This won’t really help to make the image bigger on mobile though – the first image is already as big as it can get unless you want to reduce the content padding.

[Giuseppe]

This won’t really help to make the image bigger on mobile though – the first image is already as big as it can get unless you want to reduce the content padding.

How do I reduce the content padding?

Do I have to change the padding of the section where the image is contained?

[Leo]

It would be the padding of the entire container:
https://docs.generatepress.com/article/content-padding/

[Giuseppe]

Hi,

I modified the left and right padding, setting it to zero.
The problem is always there, nothing has changed.

When I see the site from a mobile device, the images are small.

Check yourself.

[Leo]

Ahh that is using sections and still 40px of left and right padding added to the mobile:
https://www.screencast.com/t/zEyZou4q8

And this is what I see on my phone – the image full the entire width minus the padding mentioned above:
[Image removed]

[Giuseppe]

Hi Leo,

so what should i change, what should i do to fix the problem?

PS:
A courtesy, in your last screenshot, the name of the site is visible, you could hide it, thanks, because the site is not yet online and little by little we are inserting contents, I make it accessible only to let you in .. thanks

[Author]

Posts