FredP Posted January 11 Share Posted January 11 Hello, I am struggling to change the background image of my home page on mobile. Here is the URL of my website:https://www.fredetcam.com Here is the code I injected in the custom CSS section: @media only screen and (max-width: 640px){ [data-section-id="63987d07c71b4732240d4058"].section-background img { opacity:0!important }} @media only screen and (max-width: 640px){ [data-section-id="63987d07c71b4732240d4058"] .section-background { background-image: url(https://static1.squarespace.com/static/63987c03bf68e244c3d2b2ce/t/63bc4a45670e3049b76acef1/1673284168258/Invitation-Vertical.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } } Here is the image I would like to use on mobile: I saw different posts about this topic but didn't find a solution... If someone could help me. Thanks in advance, Fred Link to comment
tuanphan Posted January 15 Share Posted January 15 Hi, You want to use a new image, or resize current image on mobile? 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
FredP Posted January 16 Author Share Posted January 16 (edited) Hey @tuanphan, I would like to use a different image, and only for the main page. (the other pages don't matter). I added the code and imported the image in design > custom CSS > manage custom file. The link works well, but the code doesn't! 😉 Thanks in advance, Fred Edited January 18 by FredP Link to comment
tuanphan Posted January 19 Share Posted January 19 On 1/17/2023 at 3:40 AM, FredP said: Hey @tuanphan, I would like to use a different image, and only for the main page. (the other pages don't matter). I added the code and imported the image in design > custom CSS > manage custom file. The link works well, but the code doesn't! 😉 Thanks in advance, Fred Add to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="63987d07c71b4732240d4058"] { background-image: url(https://static1.squarespace.com/static/63987c03bf68e244c3d2b2ce/t/63bc4a45670e3049b76acef1/1673284168258/Invitation-Vertical.jpg) !important; } [data-section-id="63987d07c71b4732240d4058"] .section-background * { visibility: hidden !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
FredP Posted January 19 Author Share Posted January 19 Hey @tuanphan The first part of the code works: The laptop (horizontal) image is properly hidden but the vertical image for mobile doesn't show itself! We are halfway 😅 Link to comment
Solution FredP Posted January 19 Author Solution Share Posted January 19 It works like this! thanks a lot! @tuanphan I had to make a little twist. @media screen and (max-width:767px) { [data-section-id="63987d07c71b4732240d4058"] .section-background * { visibility: hidden !important; } } @media only screen and (max-width: 767px){ [data-section-id="63987d07c71b4732240d4058"] .section-background { background-image: url(https://static1.squarespace.com/static/63987c03bf68e244c3d2b2ce/t/63bc4a45670e3049b76acef1/1673284168258/Invitation-Vertical.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } } tuanphan 1 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