Wells: Control the Caption display position?

Anyone know how I can stop the captions from jumping from the left side of the page to the right when looking at the site on a small screen? it's hard to explain in words but check out:

https://alison-shuman.squarespace.com/minarets-and-onion-domes

if you see the caption on the left, make the browser window smaller.

thanks in advance!

Hey Rutherish!

That worked perfectly, thanks so much for sharing. :)

I'm having a similar problem, but rather than having a gallery block on a regular page, I'm using the gallery page. I need the image title to credit the photographers under the images (I'm a photo editor) but for some reason it shows up way over on the left in the sidebar. It doesn't even look like it's related to the image. Does anyone know how to reposition the image caption to be below the image in the gallery page style? Possibly the 'previous/next' buttons as well? It makes no sense for them to be in the sidebar. No one will even notice them there. And if you make the browser window smaller it will eventually actually cover the navigation buttons in the sidebar! Terrible.Thanks so much for reading.Christina

HiI am on a 1600 px x 1200 px screen on a PC and I do not see a caption at all at your link or pages in that portfolio.(Was looking to improve my own positioning but cannot assess whether your solution is working)Scott

hey ruthersish, your solution was working great for me but suddenly that code no long plays nice in the code injection.

it just appears on the top of that page now... take a look:https://vladic-ravich.squarespace.com/azerbaijan/

squarespace isn't being helpful at all, your code was the only thing that fixed this... any ideas? Thanks in advance!!

This code seems not to work anymore.

Does anyone have a new code to move the caption location in the gallery (possibly into a line, below the single image)?

thank you!

Hi all,

Adding to this - can anyone suggest how to alter the above code to specify the vertical position of the caption? I'm trying to keep the captions at a fixed position higher up the sidebar as having it at the bottom causes misalignment with changing images/video thumbnails. I tried changing the 'bottom' value but with no result.

Many thanks

Try this updated code, worked for me on Wells:

.collection-type-gallery.hide-meta .meta {
right: 0;
left: 40px;
width: auto;
background: #fff;
bottom: 30px;
max-width: 230px;
z-index: 9999;
}

.collection-type-gallery.hide-meta .meta #simpleControls {
 display: none !important;
}
.collection-type-gallery.hide-meta .meta #dotControls {
 display: block !important; 
}
.collection-type-gallery.hide-meta .meta #numberControls {
 display: none !important;
}

Use this with the CSS in the previous Answer.

You can add this code to adjust which type of controls it uses. This will show the dots, but change the display for #dotControls to 'none' and the #numberControls to 'block' if you want numbers instead.

I am using the following to 'hide' the thumbnail buttons behind the sidebar in Wells when the website window in resized to be too short to fit the sidebar and buttons:

.collection-type-gallery.hide-meta .meta {

right: 0;

left: 20px;

width: auto;

background: #fff;

bottom: 60px;

max-width: 215px !important;

z-index: -9999;

font-size: 14px;

}

I have now added an Image Title and Image Description, and they are overlapping the sidebar upon resizing of the window.

Any thoughts???

Thank you!!

On 1/24/2014 at 1:20 PM, cfaminoff said:

I'm having a similar problem, but rather than having a gallery block on a regular page, I'm using the gallery page. I need the image title to credit the photographers under the images (I'm a photo editor) but for some reason it shows up way over on the left in the sidebar. It doesn't even look like it's related to the image. Does anyone know how to reposition the image caption to be below the image in the gallery page style? Possibly the 'previous/next' buttons as well? It makes no sense for them to be in the sidebar. No one will even notice them there. And if you make the browser window smaller it will eventually actually cover the navigation buttons in the sidebar! Terrible.Thanks so much for reading.Christina

I have the same problem as Christina. I have fairly lengthy descriptions for some of my photos. On smaller laptops/browsers, the caption moves to the right and pretty much blocks a good deal of my photo. I would like it to reposition itself to the bottom of the image without blocking any part of the image. Is there any CSS solution out there? The codes provided below fix the captions to the navigation bar. Down side of that is, if you have too long of a caption it will cut off your navigation menu.

10 hours ago, BSarkar said:

I have the same problem as Christina. I have fairly lengthy descriptions for some of my photos. On smaller laptops/browsers, the caption moves to the right and pretty much blocks a good deal of my photo. I would like it to reposition itself to the bottom of the image without blocking any part of the image. Is there any CSS solution out there? The codes provided below fix the captions to the navigation bar. Down side of that is, if you have too long of a caption it will cut off your navigation menu.

If you share link to your site. I can take a look

Hi-

I'm also having this problem. Trying to have the descriptions under the image- I'm assuming there's some CSS to do that.

Currently it's kind of clumped to the side, but still overlapping the image.

https://www.moniquejaques.com/growingupinthegazastrip/34ne815pr7gz40ro0rmraywx1921cb

This is the code I'm working with 

.collection-type-gallery.hide-meta .meta {
 right: 0;
 left: px;
 width: 800px;
 background: auto;
 bottom: 0px;
 max-width: 1200px;
}

It looks like you solved with this code

.collection-type-gallery.hide-meta .meta {
    position: relative;
    margin-right: 0 !important;
    margin-left: auto;
    width: auto;
    bottom: 23px;
    max-width: 1000px;
}

.collection-type-gallery.hide-meta .meta {
    position: center;
    margin-right: 0 !important;
    margin-left: auto;
    width: auto;
    bottom: 23px;
    max-width: 1000px;
}

this worked for me. right doesn't show and bottom stays centered. left is as is. 

On 4/24/2022 at 11:57 AM, mprDesigns said:

.collection-type-gallery.hide-meta .meta {
    position: center;
    margin-right: 0 !important;
    margin-left: auto;
    width: auto;
    bottom: 23px;
    max-width: 1000px;
}

this worked for me. right doesn't show and bottom stays centered. left is as is. 

it stopped working?!?! why? I had to change it back to relative instead of center. Not sure if another code or setting Iv'e changed since this was added is causing a conflict???

they talk here about this issue : https://support.squarespace.com/hc/en-us/articles/206545647-Wells-template#toc-gallery-pages

after years, the issue is there.

On 6/23/2022 at 3:14 AM, delmi said:

Hi all,

WELLS template looks like not in the 7.1 sqs version. I dont will move for sure.

Thank you for the code it works in my site www.delmialvarez.com 

But, I ask if someone here know how to add the caption beneath the image instead on the left side.

Thank your

 

What is your site url? We can take a look

7 hours ago, tuanphan said:

What is your site url? We can take a look

My site is www.delmialvarez.com

Thank you for your time.

my site is www.delmialvarez.com but the code is not working anymore. I wrote Squarespace team to improve the question as Christina said, caption below the image and not on the left in navigation side and they replied regarding to move to 7.1, but in 7.1 there is not WELLS template, so, i don't will move. 

Anyone can help with a CSS code?

thanks

On 4/5/2023 at 7:10 PM, delmi said:

my site is www.delmialvarez.com but the code is not working anymore. I wrote Squarespace team to improve the question as Christina said, caption below the image and not on the left in navigation side and they replied regarding to move to 7.1, but in 7.1 there is not WELLS template, so, i don't will move. 

Anyone can help with a CSS code?

thanks

Can you share link to page where you have problem?

On 4/7/2023 at 6:27 AM, tuanphan said:

Can you share link to page where you have problem?

https://www.delmialvarez.com/anthropogenic

this page.

On 5/11/2023 at 11:43 PM, delmi said:

https://www.delmialvarez.com/anthropogenic

this page.

What should it look like?

Hi there, 

I am trying to keep the image description/gallery controls in the left sidebar rather than what they're doing now (sometimes showing up left, sometimes showing up right and covering the bottom corner of my images). Does anyone have CSS for that? I've tried what's in this thread and none if it is quite what I'm looking for... 

Thank you! 

FM

What I DON'T want: 

What I DO want: