lucyrose Posted June 29, 2021 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?
TNECDA Posted June 29, 2021 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%; }
Recommended Posts
Archived
This topic is now archived and is closed to further replies.