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

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

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?

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.

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

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