Jump to content

Wells: Control the Caption display position?

Go to solution Solved by ruthersish,

Recommended Posts

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!

Edited by llogan
Link to comment
  • Solution

Add this to your CSS Editor to override the right positioning, you may want to adjust the values:


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

Edited by ruthersish
Link to comment
  • 5 months later...

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

Link to comment

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

Link to comment
  • 2 months later...

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!!

Link to comment
  • 1 month later...
  • 2 months later...

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

Link to comment
  • 2 months later...
  • 3 months later...

.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.

Link to comment
  • 7 months later...

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!!

Link to comment
  • 4 years later...
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.

Link to comment
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

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
  • 8 months later...

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

 

Link to comment

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

 

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
  • 1 year later...

.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. 

Link to comment
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???

Link to comment
  • 1 month later...

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

 

Link to comment
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

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.