Jump to content

Inline & Poster Image text customisation

Recommended Posts

Site URL: https://www.peachofmyart.com/work/vivid-magazine

I'm trying to customise the associated text for an image so that it suits both mobile and desktop view.
Squarespace doesn't include any Style adjustment options for Inline Images in the Design section; and for Poster Images, the possible adjustments are not relevant to me.
I have a few options that would look clean but I'm chasing my own tail on my forums search and wasting f-loads of time.  I need you, Brains Trust, I really do.
Looking to know what solution you think is possible/easiest/best & the CSS to input. 

Bear with me.

There are a 3 options for layout I like, but they all need tweaking.

Option 1 - Image Style: Inline with text caption below
Design Problem - In mobile view it destroys the hierarchy of the page.
Could We? - Make it not show up in mobile view? Make it wrap tighter to the image & be smaller just for mobile?


mobile-view-caption.thumb.jpg.d0601d85844974ddfbb1c46560a297e6.jpg

 

Option 2 - Image Style: Inline with hover text justified at the bottom.
Design Problem - Can't seem to figure out how to change the colour/opacity of the hover bar or the text.
Could We? - Do that? This seems like it'll be the easiest solution.
image-inline-caption-hover.thumb.jpg.adc82bc120d94c74618257451fd12c64.jpg

 

 

Option 3 - Image Style: Inline with overlay text
Design Problem - Text is justified to the centre & looks like shit.
Could We? - Justify it to the bottom? And also if possible change the colour of the text?

desktop-view-poster-text.thumb.jpg.6a2514782beb20b073c137dfc80aaa55.jpg

Please help me so I can go to sleep.

 

Link to comment
  • Replies 1
  • Views 516
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.