Begona Posted February 10, 2021 Share Posted February 10, 2021 (edited) Site URL: http://mistoa.squarespace.com site: http://mistoa.squarespace.com password: 1234 Hi! I'm optimizing my web for mobile and trying to move both text and a button to the bottom of the image (see screenshot attached). I appreciate any help! Edited May 6, 2022 by Begona Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 You can add a section under current section, with text/button. Then we can give the code to hide it on desktop resize image on mobile - remove banner text/button on mobile Show new section you just added on mobile Begona 1 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
Begona Posted February 16, 2021 Author Share Posted February 16, 2021 (edited) That's a great idea, @tuanphan I just added a second section, can you help me with the code? Thank you! site: http://mistoa.squarespace.com password: 1234 Edited May 6, 2022 by Begona Link to comment
tuanphan Posted February 18, 2021 Share Posted February 18, 2021 On 2/16/2021 at 4:10 PM, Begona said: That's a great idea, @tuanphan I just added a second section, can you help me with the code? Thank you! site: http://mistoa.mx password: 1234 Sorry, misread your question, no need to add section 2. Add to Design > Custom CSS /*move banner text button */ @media screen and (max-width:767px) { body.homepage #page section:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } body.homepage #page section:first-child .content-wrapper { padding-bottom: 20px; } } Begona 1 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
Begona Posted February 18, 2021 Author Share Posted February 18, 2021 Thank you so much, @tuanphan! Link to comment
FouremsCreative Posted April 12, 2022 Share Posted April 12, 2022 (edited) @tuanphan Which part of the code applies to the page section? I am trying to replicate for the second section of my homepage, not the first like Begona's. I tried adjusting "first-child" to "second-child" thinking that was it, but it does not make the change. Additionally, is there any code to completely change the design of a particular section on mobile? I'm afraid moving my text down a bit won't exactly help, as it will still overlap the dotted line and image. What I'd like to do is upload a new graphic for mobile view in which the dotted line and images are more transparent and don't compete with the text. I don't want it to apply to Desktop view, because I really like the boldness of the lines in desktop view. site: https://wolverine-bulldog-2z5j.squarespace.com/ pw: unique Thank you! Edited April 12, 2022 by FouremsCreative adding more info Link to comment
tuanphan Posted April 18, 2022 Share Posted April 18, 2022 On 4/12/2022 at 9:09 PM, FouremsCreative said: @tuanphan Which part of the code applies to the page section? I am trying to replicate for the second section of my homepage, not the first like Begona's. I tried adjusting "first-child" to "second-child" thinking that was it, but it does not make the change. Additionally, is there any code to completely change the design of a particular section on mobile? I'm afraid moving my text down a bit won't exactly help, as it will still overlap the dotted line and image. What I'd like to do is upload a new graphic for mobile view in which the dotted line and images are more transparent and don't compete with the text. I don't want it to apply to Desktop view, because I really like the boldness of the lines in desktop view. site: https://wolverine-bulldog-2z5j.squarespace.com/ pw: unique Thank you! Replace this class names body.homepage #page section:first-child with data-section id Use this free tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en 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
FouremsCreative Posted May 12, 2022 Share Posted May 12, 2022 Hi @tuanphan that did not seem to work. I found the section's ID and replaced it in the code below, like you stated in your comment to me, but my text for that section is not appearing in a different location on mobile. I've included the code I ended up with, below. /*move banner text button */ @media screen and (max-width:767px) { body.homepage #page section:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } section[data-section-id="625065fc6d298905dcb68f68"] .content-wrapper { padding-bottom: 20px; } } Link to comment
tuanphan Posted May 13, 2022 Share Posted May 13, 2022 You can replace with On 4/12/2022 at 9:09 PM, FouremsCreative said: @tuanphan Which part of the code applies to the page section? I am trying to replicate for the second section of my homepage, not the first like Begona's. I tried adjusting "first-child" to "second-child" thinking that was it, but it does not make the change. Additionally, is there any code to completely change the design of a particular section on mobile? I'm afraid moving my text down a bit won't exactly help, as it will still overlap the dotted line and image. What I'd like to do is upload a new graphic for mobile view in which the dotted line and images are more transparent and don't compete with the text. I don't want it to apply to Desktop view, because I really like the boldness of the lines in desktop view. site: https://wolverine-bulldog-2z5j.squarespace.com/ pw: unique Thank you! Use this code /* Luxury Mobile */ @media screen and (max-width:767px) { [data-section-id="625065fc6d298905dcb68f68"] .section-background img { content: url(https://cdn.pixabay.com/photo/2022/04/13/01/40/plum-blossoms-7129214__480.jpg); }} 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