Jump to content

How to Move Content below Background Image on Mobile

Recommended Posts

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?

Screen Shot 2022-01-14 at 1.10.50 PM.png

What is your protected password?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...
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?

image.thumb.png.d30c55e607d2a487bbaf5ee271133cec.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

image.thumb.png.adf53918e94163836dd3f97565eb20fd.png

Edited by Natanel
Link to comment

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

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.