travisandrew Posted May 26 Share Posted May 26 Hey team - I'm attempting to code a background image replacement for the first section when the following page is viewed on mobile: https://www.peterzizzo.com/dare-to-suck I've attempted the following code but I'm afraid I'm not targeting the right section id as I can't get the background image to adjust when viewed in mobile. Could someone please assist? Thanks! // mobile background replace section[data-section-id="662817ff05ecb2537fa28cbd"] { @media only screen and (max-width:640px){ .section-background img { opacity:0; } .section-background { background-image:url('https://static1.squarespace.com/static/601982cee0432c611d54064e/t/665280a48c8f5d0e8086219c/1716682918770/pete-zizzo-demons-graphic-mobile-animated-2304x4096.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } } } Link to comment
Solution tuanphan Posted May 27 Solution Share Posted May 27 If you set an effect to section background image, you will need a different code. section[data-section-id="662817ff05ecb2537fa28cbd"] { @media screen and (max-width:767px) { .section-background-canvas.background-fx-canvas { display: none; } .section-border img { visibility: visible !important; content: url(https://static1.squarespace.com/static/601982cee0432c611d54064e/t/665280a48c8f5d0e8086219c/1716682918770/pete-zizzo-demons-graphic-mobile-animated-2304x4096.jpg); }}} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment