Move text and button to bottom of image on mobile

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!

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

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

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;
}
}

Thank you so much, @tuanphan!

@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!

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

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;
}
}

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);
}}