- This topic has 12 replies, 4 voices, and was last updated 6 years, 9 months ago by
.
-
Posts
-
Hi! I have an image on my front page. It isn’t a background image so it resizes by default on mobile devices however, it resizes too small – it contains texts and they become too small to read comfortably. Do I need to set different image sizes for specific mobile devices with a media query and if so do I need to set a div class for the each photo first and If so, can I have an example please? Thanks a lot!
Lead Developer
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 intoHave 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/
Customer Support
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?
Customer Support
This gap?
https://www.screencast.com/t/pDciK6u9cThat’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/MKOdYRizf6I 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;
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 🙂
- You must be logged in to reply to this topic.
