How to Move Content below Background Image on Mobile

Site URL: https://dog-cornet-76am.squarespace.com/

Hi,

I have some text and a button on my homepage over a background image that I would like to move below the image on mobile only. I got some custom css, but it doesn't seem to be working. Do you have any suggestions?

On 1/15/2022 at 1:12 AM, Yolandi said:

Site URL: https://dog-cornet-76am.squarespace.com/

Hi,

I have some text and a button on my homepage over a background image that I would like to move below the image on mobile only. I got some custom css, but it doesn't seem to be working. Do you have any suggestions?

What is your protected password?

tominsel

Solved with this CSS

@media screen and (max-width: 767px) {
    [data-section-id="61e0906eabd60e5d86bb0e0a"] {
        margin-top:300px;
    }

    div#page-section-61dde717eaead45934c7a3bf {
        position: relative;
        top: 350px;
    }

    div#page-section-61dde717eaead45934c7a3bf * {
        text-align: center !important
    }
}

Find ID with tool: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

That worked, thank you so much!

On 2/13/2024 at 12:16 AM, Natanel said:

Hello, I have a similar issue i would like to move the background image on my mobile site only. Currently the text is in white and will need to move the background so that it sits on top of a darker section of the image as seen in the desktop version. 

I have tried using the code above with my own section ID however this hasn't worked. Is there anything I can do in CSS in order to fix this? 

https://megalodon-walrus-x3s3.squarespace.com/

howdy123

You mean move this text down?

@tuanphan thanks for looking at this. No, for the mobile site i would like to move the focal point of the background image so that it is similar to the desktop version as seen below (trees behind the text). If not possible then would like to replace the image for the mobile site only. 

I would like to keep the text at the top of the section on the mobile version 🙂

I think you can add one more section under, design it for mobile, then I can give code to show top on desktop, show second on mobile only

@tuanphan great suggestion, I have added in the 2 different sections. Section 1 is for the desktop and section 2 is for the mobile version  

I believe I have resolved the issue using code from one of your previous posts 

// REMOVE SECTION ON MOBILE 

@media screen and (max-width:767px) {
section[data-section-id="65c4b19761886a3906f2daf9"] {
display: none;
}
}

/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
    [data-section-id="65d34925e29cf64454ecb461"] {
        display: none;
    }
}