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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

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.