How Can I Fix Images Resizing Too Small in Mobile Devices Please?

Hi there,

Having text in an image like this is an issue for a few reasons:

1. Search engines can't read it
2. Users can't translate it
3. The mobile issue you're running into

Have you considered building the list using regular HTML/CSS?

Otherwise, you could try creating two versions of the image - one for desktop and one for mobile. Then you could include them on your page with the mobile classes: https://docs.generatepress.com/article/responsive-display/

Hi there,

so GP has some mobile responsive 'hide-on' classes built in:

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

so you can edit the Image HTML in the text editor and give them a class for example:

Desktop and Tablet Image
<img src="/url_to_image" alt="alt title" class="hide-on-mobile">

Mobile Image
<img src="/url_to_image" alt="alt title" class="hide-on-desktop hide-on-tablet">

Thank you both! Tom I did build the list with regular HMTL before but really don't know why I changed my mind. I'll stick to that option. Cheers!

Glad we could help :)

Hi, Again.
So, I decide to go with your method Tom but I'm still having issues.

This is the code I used for mobile;

@media (max-width: 768px) {
    body {
        background-image: url(https://MOBILE-IMAGE-URL-HERE);
    }
}

But when I save everything and I inspect it via the customizer and Chrome Inspect responsive viewer it still has the gap underneath the element header. The issue does not show with the mobile viewer inside the customizer but with the Tablet viewer.

With Chrome Inspect it shows with both mobile and tablet.

What am I doing wrong? I used a 1024px image for the tablet view with the same media query code to see if the image had to be size specific and it was still showing a gap.

What am I doing wrong?

This gap?
https://www.screencast.com/t/pDciK6u9c

That's actually not an image issue.

Do you not want to add any other content on that page?

Let me know :)

Hi Leo! Yes that one:) It shows up in Tablet and Mobile views. I read that it shows by default because background images aren't responsive.

I am going to create other content yes I'm just building the page up :) I noticed my Footer area has disappear also, not sure what that's about yet but will investigate.

So if it's not a background image issue, what is it?

It's the top and bottom margin from the separate container margins:
https://www.screencast.com/t/MKOdYRizf6

I kind of need to know what content you plan to add to provide the best solution.

Perhaps one container might work for you already:
https://docs.generatepress.com/article/content-layout/

Hi Leo, I moved the separate container margin but the gap still remains...have a look;

Spacing at the bottom

The footer menu moves but the gap in between the actual image the red arrow is pointing to and the hero element above remains.

I changed the container but it's the same.

Any other suggestions :)

Can I see this anywhere? The URL you provided seems to be a bare GP site.

Let me know :)

Hey Tom, sorry. There was another issue with the footer area - it seemed to have disappeared without reason. Searched every where to try and locate the issue but to no avail. I reset certain sections and cleared my cache everything. I got fed up and decided to start again so I reset everything. I didn't do much so it's ok :)

Thank you all for your time all the same :)

No problem :)