Jump to content

Move text and button to bottom of image on mobile

Recommended Posts

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

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

 

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
  • 1 year later...

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

Screen Shot 2022-04-12 at 10.04.18 AM.png

Edited by FouremsCreative
adding more info
Link to comment
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!

Screen Shot 2022-04-12 at 10.04.18 AM.png

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

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

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!

Screen Shot 2022-04-12 at 10.04.18 AM.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.