Jump to content

York: Is it possible to move caption on top of the image?

Recommended Posts

Hello! I am trying to move the image captions on a Project Page Template on the top of the page as opposed to below it. Is there a custom CSS that anyone has that would work for this?

I saw a thread for the same question on the Bedford template but it seems like that issue was not resolved. I'm trying to get this sit up in the next few days so if anyone could help me in this regard that would be awesome. Many thanks!

Link to comment
  • Replies 12
  • Views 3.3k
  • Created
  • Last Reply

Hi!

I have put together a few lines that should do the trick. Try adding them to your custom CSS:


/* puts captions above images */
.project-slide {
   display: flex;
   flex-direction: column-reverse;
}

/* optional: image captions spacing */ 
.project-slide-description-title {
   margin-top: 0px !important;
   margin-bottom: 0px !important;
}

.project-slide-description-text p {
   margin-top: 0px !important;
   margin-bottom: 10px !important;
}

.project-slide-description-wrapper {
   margin-bottom: 10px;
}


Link to comment
  • 1 year later...

Hi @Madsgram

For some reason it's not working for me. I also use York template and here's my gallery page: https://decagon-pear-tmt5.squarespace.com/iberostar-selection-bavaro  —  I want both the title and description of each image to display on top of each image. To be more specific: In a small Arial font (black) with a white background, on the bottom left corner of each image.

Thanks!
cc @tuanphan

Link to comment
1 hour ago, cesarlanga said:

Hi @Madsgram

For some reason it's not working for me. I also use York template and here's my gallery page: https://decagon-pear-tmt5.squarespace.com/iberostar-selection-bavaro  —  I want both the title and description of each image to display on top of each image. To be more specific: In a small Arial font (black) with a white background, on the bottom left corner of each image.

Thanks!
cc @tuanphan

First, can you enable title & description? i don't see both

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
16 hours ago, cesarlanga said:

Hi @tuanphan — Title & Description are enabled. I don't know why they don't show up.

.collection-type-gallery.gallery-design-grid .slide .slide-meta {
    display: block !important;
    position: absolute;
    z-index: 999;
    color: #fff;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    padding-left: 20px;
}

 

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

@cesarlanga

.collection-type-gallery.gallery-design-grid .slide .slide-meta {
    display: block !important;
    position: absolute;
    z-index: 999;
    color: black;
    left: 0;
    right: 0;
    background: white;
    padding-left: 20px;
    bottom:0;
    font-size: 12px;
}
.collection-type-gallery.gallery-design-grid .slide .slide-meta p {
    margin-top: 0;
    margin-bottom: 0;
}

 

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

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.