DavvaMC Posted June 21 Share Posted June 21 (edited) Hi I have added custom css to display a background image when viewed on smaller screens. When I view through a responsive tester and view the ource code it says the image being used is he desktop image? Here is my code @media only screen and (max-width: 1024px) { section[data-section-id="6673e1f8a3a59808965c32da"] .section-background img { opacity:0 !important; } section[data-section-id="6673e1f8a3a59808965c32da"] .section-background { background-image:url('https://static1.squarespace.com/static/5fec63b71c227637fcd74134/t/6673f279c0893213adf3ed95/1718874746151/hero-home-mobile.jpg') !important; background-size: contain; background-position: 40% 100%; background-repeat: no-repeat; } section[data-section-id="6673e1f8a3a59808965c32da"] .sqs-block-button-container { border: 1px solid red; } } What am I missing? Please view here - https://www.cn8.co.uk/new-home Many thanks Edited June 21 by DavvaMC Link to comment
DavvaMC Posted June 21 Author Share Posted June 21 Sorry I am also trying to change the width of the orange button, when viewed on smaller screens the text wraps. Thanks Link to comment
Solution tuanphan Posted June 23 Solution Share Posted June 23 #1. You mean the code doesn't work or? #2. You mean this button? 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
DavvaMC Posted June 27 Author Share Posted June 27 Thanks, I think I have sorted it now. Much appreciaed. 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