I’m working on my website, Cleancery, which focuses on symbolism and clean design. I’ve run into a CSS layout issue that I’m struggling to resolve.
https://cleancery.com/

My site design emphasizes minimalism and clarity, but on certain pages, the layout isn’t responding as expected. Specifically, I’m facing these problems:

Content Overlapping: On smaller screens, text overlaps with images in a few sections, especially on pages where I discuss the symbolic meaning of different objects.

Flexbox/ Grid Issue: Despite using flexbox or CSS grid for a clean layout, some items don’t align correctly in certain browsers. I want to maintain the clean look while ensuring cross-browser compatibility.

Responsiveness: The overall design breaks on mobile devices. I’m using media queries, but they aren’t fully effective in keeping the clean and symbolic theme of Cleancery intact.

I would appreciate any advice or suggestions on how to fix these issues and maintain the clean, symbolic aesthetic that my site revolves around.

I want to fix my site