JamieC Posted November 30, 2020 Share Posted November 30, 2020 (edited) Site URL: https://www.autocars.ltd/landing-page-mini-2 Hi, i'm creating a cover page and i think it looks good on desktop. however the mobile version has a slight issue because the words are unreadable due to the background image (IMAGERY?) This is how it looks like now: Desktop: Mobile: I would like to know if there is any way to code and make the opacity of the overlay on the mobile version higher, so that I can read the words more clearly? something like this: Currently im adjusting the overlay colour on top of my background image to play with the opacity level of the background image. Edited December 1, 2020 by JamieC Link to comment
tuanphan Posted December 5, 2020 Share Posted December 5, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:640px) { .scrim { background: rgba(0,0,0,0.75) !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JamieC Posted December 7, 2020 Author Share Posted December 7, 2020 Thanks tuanphan for the solution! When i preview it on squarespace preview (desktop and mobile version), it works nicely. However when I tried viewing on the actual domain on the phone, it didn't work for my case (i think because CSS doesn't work on cover page). Nonetheless thanks for your help, I think I will try to create a new page instead of using a cover page! Link to comment
tuanphan Posted December 8, 2020 Share Posted December 8, 2020 20 hours ago, JamieC said: Thanks tuanphan for the solution! When i preview it on squarespace preview (desktop and mobile version), it works nicely. However when I tried viewing on the actual domain on the phone, it didn't work for my case (i think because CSS doesn't work on cover page). Nonetheless thanks for your help, I think I will try to create a new page instead of using a cover page! Try adding this to Cover Page Settings > Advanced > Header <style> @media screen and (max-width:640px) { .scrim { background: rgba(0,0,0,0.75) !important; } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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