lucyrose Posted June 29, 2021 Share Posted June 29, 2021 Site URL: https://www.lucyfeehan.com/work/paysafecard I have a video background block on this page (around half way down) The video works great on desktop but on mobile is totally the wrong size. I would like to display the fallback image on mobile OR resize the background video. How do I do this? Link to comment
TNECDA Posted June 29, 2021 Share Posted June 29, 2021 Use this code.... you are going to need a url for the image though. I just upload it to a company google drive. Mobile Breakpoints /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ /* Insert Code for Mobile Above This Line */ } Mobile CSS #PAGEURL img { display: none; } #PAGEURL .sqs-block-image img { display: block; } #PAGEURL { background: url('IMAGEURL'); background-repeat: no-repeat; background-size: 100%; } 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