Above the fold images are not responsive

Hi!

I’m so baffled by the best way to size top-of-the-page images (in a color section) and make my site more responsive.

This is the page I’m working on:
ETA: The first page I pasted here was wrong. The actual page is: https://briancartergroup.com/portfolio-item/final-draft-case-study-alternate-version/
Password: Lynda

The image I have at above the fold is 1500×1001, which is the same size as the image on this demo page: https://kriesi.at/themes/enfold-2017/features/

I realize that on the demo page there’s no diagonal border and that the image goes behind the menu and also below the fold. But I should still be able to see the center of the image when I’m testing responsiveness with the Chrome inspect tool, right?

This page has a different image at the top, which is 2000×668, and is really the one we prefer

Password: Lynda

I could hide the top color section for mobile, but then I lose the stats that we want to highlight.

Is there someplace I can go to learn more about how to do this? I have to fix SO many pages on this site!

I don’t even know where to start on the gargantuan footer. When I bought Enfold, I really thought the theme took care of this stuff automatically.

Thanks for any ideas you may have!
Tracey

• This topic was modified 3 years, 11 months ago by traypup. Reason: Wrong page sample