Layout & Responsive Issues

Hey everyone,

I’m building a website using Elementor with the Blocksy theme, and I’m running into a frustrating issue with my layout.

Desktop/Large Screen Issue:

• I have a flex container with a background image and another flexbox within that with text inside.
• On larger screens (wide monitors), the background image gets cut off and the text doesn’t stack correctly or align against the image the way it does on smaller laptops.
• The layout looks great on my laptop but blows out of proportion on large monitors.

Mobile Issue:

• I managed to fix the look on desktop, but now the heading and call-to-action button are way off on some mobile phones.
• In Elementor’s mobile preview, everything looks fine, but on real devices the text shifts down too far.
• I’ve tried adjusting padding and margin (sometimes with negative values), but that fix is fragile and breaks things elsewhere.

What I’ve Tried:

• Nested flex containers
• Adjusting container widths and alignments
• Setting background size to “cover” or “contain”
• Playing with VH, %, PX for spacing
• Reverting and restyling from scratch

Anyone know how I can stabilize the layout across both large and small screens while keeping the content aligned with the background image?

Thanks so much in advance!

• This topic was modified 11 months ago by andrew771.