ChantelZP Posted July 5, 2018 Share Posted July 5, 2018 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
Madsgram Posted July 5, 2018 Share Posted July 5, 2018 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
Mdhanjal Posted July 5, 2018 Share Posted July 5, 2018 share page url pls Hi, I'm BITTU. A website developer with 10 years experience with Squarespace. if you need help and work with me, Email me here: - mandeepsquarespace@gmail.com Hire Upwork: - https://www.upwork.com/freelancers/~01eed466e76c89e024 Behance: - https://www.behance.net/mandeepSquarespace Best Hourly Rate: - $15 Per Hour Link to comment
ChantelZP Posted July 5, 2018 Author Share Posted July 5, 2018 This worked!!! Thank you so much!!! Link to comment
ChantelZP Posted July 5, 2018 Author Share Posted July 5, 2018 Hi mdhanjai the pages were hidden so I didn't share the url. Madsgrams solve works though! Link to comment
ChantelZP Posted July 5, 2018 Author Share Posted July 5, 2018 Thank you for reaching out as well :) Link to comment
cesarlanga Posted November 28, 2019 Share Posted November 28, 2019 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
tuanphan Posted November 28, 2019 Share Posted November 28, 2019 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
cesarlanga Posted November 29, 2019 Share Posted November 29, 2019 Hi @tuanphan — Title & Description are enabled. I don't know why they don't show up. Link to comment
tuanphan Posted November 30, 2019 Share Posted November 30, 2019 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 Posted November 30, 2019 Share Posted November 30, 2019 Thanks @tuanphan — 2 more things: 1. How can I change the caption position to display on top of the image? 2. I only want the black background to be behind the caption, not the entire width of the image.See example attached. Link to comment
tuanphan Posted November 30, 2019 Share Posted November 30, 2019 @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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.