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
JoePapilaja Posted September 2 Share Posted September 2 Hi there, I have tried the above codes for the site I am working on, but it does not work for me. I am trying to get the text on a banner for mobile view, to move it to the bottom of the banner. Can you please help? Thanks so much in advance. Url: https://www.fountainoflifeamsterdam.nl/home-banner Link to comment
tuanphan Posted September 4 Share Posted September 4 On 9/3/2023 at 2:55 AM, JoePapilaja said: Hi there, I have tried the above codes for the site I am working on, but it does not work for me. I am trying to get the text on a banner for mobile view, to move it to the bottom of the banner. Can you please help? Thanks so much in advance. Url: https://www.fountainoflifeamsterdam.nl/home-banner You mean this? 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
JoePapilaja Posted September 5 Share Posted September 5 On 9/4/2023 at 10:42 AM, tuanphan said: You mean this? Hi @tuanphan, i mean the text that overlays the background. I want it at the bottom in mobile view. On desktop view it sits at the bottom, but in mobile view it sits in the middle. See screenshot. Link to comment
tuanphan Posted September 7 Share Posted September 7 On 9/6/2023 at 3:23 AM, JoePapilaja said: Hi @tuanphan, i mean the text that overlays the background. I want it at the bottom in mobile view. On desktop view it sits at the bottom, but in mobile view it sits in the middle. See screenshot. You can use a CSS code like this @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1693067310200_3236 { position: relative; top: 20vh; } } 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
JoePapilaja Posted September 8 Share Posted September 8 On 9/7/2023 at 10:29 AM, tuanphan said: You can use a CSS code like this @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1693067310200_3236 { position: relative; top: 20vh; } } This worked!!!! You’re a legend @tuanphan 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