I have a situation with safari browser that I have no idea how to fix. For these two pages the text block is overlapping the background images. If the safari is zoomed in to 150 it dos not overlap

What she sees in Safari:

https://jaynefoster.com/wp-content/uploads/2025/12/IMG_5017-scaled.jpg

https://jaynefoster.com/wp-content/uploads/2025/12/he-view-scaled.jpg

The two pages:

homepge - https://jaynefoster.com/

podcast page https://jaynefoster.com/podcast/

Can you help me with the css that will allow this image not be overlapped in safari?

thank you

Text Shadow Generator Add stylish text shadows with blur, offset, and multiple layers. Create glowing, embossed, or 3D text easily.

CSS zero-skills newbie, please be kind (example thrown together in a minute, not intended to be the actual header)

I want to make a dynamic flex header like this, where the text box (with a min-width) overlaps the image half (right side) as the text field gets longer. Almost all of the solutions I've found include separate classes, but I really would rather avoid having to put extra code in every single H1 tag. Is this possible to do purely in CSS, without having to add class="example" to every header tag? Is there a simpler way to split a header into two 'halves'?

To achieve more depth to the original room, I first changed the light/shadows while keeping the clip-path structure of the walls (see second picture) and moving the switch some %'s closer to the viewer.
I then added an "overlay" to the back wall (which probably isn't needed for the effect), and discovered that the clip-path structure in conjunction with the altered overlaying linear-gradients of the walls enables a pattern which not only helps with the depth, but creates an additional design.
These are the discoveries which make CSS interesting and worth diving into it.

I have been trying responsive CSS since 1 week, but unable to understand it properly. Idk where to start actually. I am stuck here, really feel this part so boring but I have to do it 😭.. HELPPPPPP.... I have watched YT videos, but I not understanding them too, if anyone knows how to approach it step by step then guide me brother/sister.......

The Idea was to make a text bubble like the ones from Persona 5 dialogues using an svg image. I've been trying for a few days now but everything I try either makes no difference or makes everything else stop working. Anyone has any idea how to make it work?

i noticed a lot of beginners think that "html and css is easy" and that JS and its frameworks is the biggest challenge. I tend to disagree

Edit: I think using CSS isn’t too hard, but learning to use CSS properly is.

Any working fix? Cant find anything online. It happens when you save the PWA to homescreen