Div block transparency not displaying on live site

Alright I’ve spent WAY too much time trying to figure this out and am at a loss…any help would be greatly appreciated! (likely something small and dumb that I overlooked).

I created my site using a template (hence the random workout photos on there), and I added a div block to the hero section with a linear gradient so that you can see the background image on the right side. This displays correctly in the designer and in preview mode, but when I publish the site (here), the transparency of the div block is gone which blocks out the image.

I’ve tried deleting the div block and starting over, viewing in an incognito window, etc., and I can’t get the published site to match what I see in the designer.

Any ideas?


Here is my site Read-Only: LINK

Slight update: I decided to try putting the linear gradient directly in the section background as shown below (so layering it in the same place as the hero image) but still having issues with the live site…

Screenshot 2023-07-12 at 12.09.12 PM

Ok I think I figured it out, looks like the background image and gradient weren’t being applied upward to the larger breakpoints (not sure why?). Fixed!