Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


ChantelZP
Go to solution Solved by Madsgram,

Question

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!

Edited by ChantelZP
Initial Revision
Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

.collection-type-gallery.gallery-design-grid .slide .slide-meta { display: block !important; position: absolute; z-index: 999; color: #fff; left: 0; right: 0; background: r

@cesarlanga .collection-type-gallery.gallery-design-grid .slide .slide-meta { display: block !important; position: absolute; z-index: 999; color: black; left: 0; right: 0;

Posted Images

12 answers to this question

Recommended Posts

  • 1

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 post
  • 1
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

Link to post
  • 1
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;
}

 

Link to post
  • 1

@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;
}

 

Link to post
  • 0

share page url pls

Hi, I'm BITTU. A website developer with 8 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com Best Hourly Rate :- $15 Per Hour

Link to post
  • 0

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

Edited by cesarlanga
Tagged another professional.
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...