Jump to content

Image overlap design on mobile - moving text below image

Recommended Posts

Site URL: https://misotasty.com/

I'm having trouble adjusting the positioning of the text on my overlay image on mobiles so that the text is shown below the image instead of on the left side like it is on the desktop view (first attachement). I'm trying to get it so that it looks like the way it shown on the Squarespace mobile preview (second attachment) but instead it looks like the one in the third attachment which is the same layout as the desktop layout (first attachment). Please help!

Screenshot 2022-04-11 at 15.34.01.png

Screenshot 2022-04-11 at 15.34.22.png

Screenshot_20220411-153922.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

On 4/11/2022 at 9:42 PM, cl-mt said:

Site URL: https://misotasty.com/

I'm having trouble adjusting the positioning of the text on my overlay image on mobiles so that the text is shown below the image instead of on the left side like it is on the desktop view (first attachement). I'm trying to get it so that it looks like the way it shown on the Squarespace mobile preview (second attachment) but instead it looks like the one in the third attachment which is the same layout as the desktop layout (first attachment). Please help!

Screenshot 2022-04-11 at 15.34.01.png

Screenshot 2022-04-11 at 15.34.22.png

Screenshot_20220411-153922.png

I check that it looks the same layout with your second image as you wish? Have you figured it out?

image.png.f7f0f5fb232713ffd2e0b2aedab22bcc.png

Edited by bangank36

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

Hi cl-mt and bangank36, I am having the same problem. Like cl-mt, I would like to move the text above my anchor image (I would like to move it together with the pinkish background down below the image on mobile view) but it ends up like the third image that miso tasty posted. I used this code from this website: https://www.applet.studio/blog/fix-banner-image-squarespace but the text ends up on the right of my image on mobile view. 

I would like the same effect as this website (i.e. the way it appears on mobile): https://www.treehousetraumacentre.com/ 

Would appreciate help with the coding of CSS as I am a newbie at this and learning on my own.

This is my website: https://anchoredhearts.ca/ 

Thanks in advance.

Link to comment
On 4/15/2022 at 1:55 PM, seapearl said:

Hi cl-mt and bangank36, I am having the same problem. Like cl-mt, I would like to move the text above my anchor image (I would like to move it together with the pinkish background down below the image on mobile view) but it ends up like the third image that miso tasty posted. I used this code from this website: https://www.applet.studio/blog/fix-banner-image-squarespace but the text ends up on the right of my image on mobile view. 

I would like the same effect as this website (i.e. the way it appears on mobile): https://www.treehousetraumacentre.com/ 

Would appreciate help with the coding of CSS as I am a newbie at this and learning on my own.

This is my website: https://anchoredhearts.ca/ 

Thanks in advance.

Hi,

For top banner text?

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

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.