Jump to content

Image - Poster text position

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.bordersandblasting.com/

I'm updating a site for a customer who wanted a square image - poster block to display the page titles. 

They want the text to be positioned at the bottom of the image on all devices. 

At the moment, using the below code, I've managed to make it sit at the bottom on the mobile view, but not the desktop. 

Please can anyone help me with code to make it do both?

Thanks

hr { padding: 1px 0 1.5px 0;}
.design-layout-poster .image-title-wrapper {
    margin-top: 190px;
}

 

BSB Mobile.png

BSB Desktop.png

Link to comment
  • 2 weeks later...
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

Hi.

Remove your code & add this code

/* Align poster title */
figure.design-layout-poster figcaption.image-card-wrapper {
    align-items: flex-end !important;
}

 

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.