CSS Injection To Move/Change Image Title in Gallery Page Wells

Site URL: http://www.frankmeuschke.com

Hi. Looking for help with CSS injection to change position of the image title in Wells 7.0 Gallery Page. It appears to be either on the left sidebar when large or overlapping image when medium size. I'd really like it to be 1.5 lines beneath the image, left side and stick with that placement regardless of browser window size.

I've used this forum to find code to inject to change the font size of the image title (great, thanks!), but I see it is still the same in mobile (thick font -darn ugly) and I'd like that to be the same lightweight (normal?) font as on the desktop version.

Thank you. Attached are some page examples of the image title location problem and the mobile version thick font.

www.frankmeuschke.com

10 hours ago, Frank_Mound said:

Site URL: http://www.frankmeuschke.com

Hi. Looking for help with CSS injection to change position of the image title in Wells 7.0 Gallery Page. It appears to be either on the left sidebar when large or overlapping image when medium size. I'd really like it to be 1.5 lines beneath the image, left side and stick with that placement regardless of browser window size.

I've used this forum to find code to inject to change the font size of the image title (great, thanks!), but I see it is still the same in mobile (thick font -darn ugly) and I'd like that to be the same lightweight (normal?) font as on the desktop version.

Thank you. Attached are some page examples of the image title location problem and the mobile version thick font.

 

www.frankmeuschke.com

Try adding to Home > Design > Custom Css

#collection-614cd47a24319c70ccde0401 #galleryWrapper  .meta {
  width: 100%;
  max-width: unset;
  margin-left: 240px;
  right: unset;
}

#collection-614cd47a24319c70ccde0401 #galleryWrapper .image-title strong {
  font-weight: bold;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing

On 1/18/2022 at 12:22 AM, bangank36 said:

My testing

It seems to work, thank you! However, two details I need to fix. As in the sample below, it appears the image title isn't in line with the image, it is to the left. The other issue that has changed since the CSS -on other gallery pages, where there is a description below the image, the description appears double spaced. Examples below:

Ok, I can change the double spacing via the text box formatting, so that problem is solved. What I'd like to see is the image title change with the left edge of the image instead of being fixed on the left edge of the image wrapper or container. Is that possible?

Also, now with your helpful CSS, playing around with adding a description under the image. That overlaps the image now. I'm sure there is code to drop the text below an image which has no set size (based on browser window size). Getting closer!

Kindly try removing this line in my previous code

width: 100%;

16 hours ago, bangank36 said:

Kindly try removing this line in my previous code

width: 100%;

 

Ok, so seems to me too many complications -didn't really work on all browser sizes. So I have changed the page to a blank with a gallery block. It is not as responsive, but I can have the description below the images.

Is there CSS to change the characteristics of the hover title and scroll arrows -i.e. color of font, background transparency color and size, or even to push titles below image and arrows off the image. Thank you!

My testing

On 1/20/2022 at 5:00 PM, bangank36 said:

My testing

Ok! Seems to be working after I removed former CSS. What I would like to do now is remove the light gray box that bounds the image (see attached) and if possible, make the title text a bit smaller font, or maybe Italic. I added -1REM to get the title box a bit closer to the image. Seems to work. Here is the code as it stands now:

#block-a80fd1152cabf450a72f .slide.loaded .meta-title {
  color: #696969;
  white-space: nowrap;
}
  #block-a80fd1152cabf450a72f .sqs-gallery {
  margin-bottom: 20px;
}
#block-a80fd1152cabf450a72f .slide.loaded .meta {
  position: relative;
  opacity: 1 !important;
  margin: -1rem;
  background: transparent;
}
#block-a80fd1152cabf450a72f .sqs-gallery-block-slideshow .meta-inside {
  padding-left: 10;
}