Sorry misunderstanding. This is not what I meant. Of course the lettering should remain white also on small screens on roll over.
The problem is another. On Mobile view, the title of the image and the masked black blurred background are there from the beginning. Not on rollover. So on mobile one never gets to see the normal image. Only with the writing on top. This is not good.
Please send solution for that.

Sorry misunderstanding. This is not what I meant. Of couse the lettering should rremain white also on small screen on roll over.
The problem is another. On Mobile view, the titel of the image and the smaked blurred background are there from the beginning. Not on rollover. So on mobile one never gets to see the image as it is. Only with the writing on top which is not good.
Please send solution for that.

Hello Rikard,
Thanks for the tip. I followed your suggestion and added another color section (with the fixed background image) above it: see screenshot: https://mp-audioproductions.de/support/overview-section.jpg
In the frontend, however, a part is still hidden when jumping to the section: https://mp-audioproductions.de/home-v1/#overview
See also screenshot: https://mp-audioproductions.de/support/frontend.jpg
—-
Somehow everything always disappears behind the header, even though it is shown as non-transparent.
I also had to add several “free space” elements (each 50px > 200px in total) to the Enter section at the top (where it says “Welcome”) so that the heading doesn’t disappear behind the header: see screenshot: https://mp-audioproductions.de/support/leerraum.jpg
Is there perhaps a better solution for this?
Best regards, Diana

Hi Rikard,

the subpage pasted in private link was not a good example :-(

Please see new link.
As you can see, the couple in the mobile view is at the top left of the picture. You can mainly see the seat basket.

I would now like the couple to be more central again – as it is in the desktop view in the picture.

That’s why I thought i could use object-position to align the image accordingly.
Of course, I could manually adjust the ‘left’ value for each image in each slider. But that is too complicated.

Hope my intention is more clear now :-)

Kind regards
Bernd

Kind regards

Thank you Ismael, it’s done.

Regarding <p> style and Fullscreen Slider text caption, I need some orientation. If open a new thread whith this subject, let me know.

I need typography for <p> element be justify aligned by default. I looked for an option into Enfold Settings and couldn’t find Text Alagnment attribute neither on General Styles / Tipography nor on Advanced Styles. So I’m using this CSS code:

p, li {
text-align: justify;
}

It works fine. However, when I center Caption into a Fullscreen Slider, only Caption Title takes centered alignment, but Caption Text does not. I tried adding add html <p style=”text-align: center;> element into caption text field, but the complete page breaks, so this was not a solution.

How could I indicate center alignment only to Text Caption?

As always, thanks in advance. If I have to open a different thread for this topic, let me know.

Best regards.

Still doesn’t show the image after clearing phone cache. Have re-loaded the page multiple times.
I turned on Remote Debug for Android devices and inspected the page via Dev Tools – https://imgur.com/gallery/debug-dQTFKAs.
As you can see the phone is still trying to load the 495×279.jpg file, which no longer exists.

A similar problem existed on the next day’s page. Android was trying to load the 495px images of the top two photos. So, I re-uploaded both of those photos and edited the page to load these new images.
The original image is FULL. As 495px is no longer allowed, just 4 thumbnails were created as below.
FULL (700×394)
MEDIUM (300×169)
SQUARE (180×101)
LEAFLET (150×84)
THUMBNAIL (80×45)
Screen capture of Uploads – https://imgur.com/gallery/files-GSxY4FP

So forget about the 495 px image above, here’s the crux of the issue – I’d like to understand if this is correct behaviour or if there’s a problem with the image size being loaded by Android. My phone is a OnePlus 5, 5.5-inch display with a resolution of 1920×1080 pixels, the same pixel resolution as my desktop screen. As stated before, my desktop screen only ever shows the 180px image.

The new img code for the re-uploaded images lists all 5 image sizes above.
<img decoding="async" aria-describedby="caption-attachment-14027" class="wp-image-14027 size-square" src="https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-180x101.jpg" alt="Hotel Nevada #2" width="180" height="101" srcset="https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-180x101.jpg 180w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-300x169.jpg 300w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-80x45.jpg 80w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-150x84.jpg 150w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2.jpg 700w" sizes="(max-width: 180px) 100vw, 180px">

#1 – The page specifies to display the Square thumbnail at 180px wide: if I am stating I want a 180 px image to display, why does srcset list the Medium and Full image sizes as options when these are larger than what the page code specifies? (i.e. how does srcset work? I wouldn’t have expected it to include larger image sizes than specified)

#2 – Remote Debug for Android says (I think) that the image actually being loaded on Android (the Intrinsic Size) is the Full size image, 700x394px at 35kB, and not any of the smaller thumbnails. Why is Android loading the Full size image (and not Square) – or am I incorrectly interpreting Remote Debug?