Changing photo size on overlay screen for Featured List Screen

Get Help
1

I’m using this code on another Directory screen, and it formats the photos to the size I want when the overlay pops up.

I’m trying to use the same code for the Featured List Screen. The code works for the overlay for the directory list at the bottom of the page, but it doesn’t seem to work for the Featured List overlays.

/This section formats the logo image on the detail screen for screen sizes up 500px/
@media screen and (max-width: 500px){
new-small-card-list-container .small-card-list-detail-image, .small-card-detail-wrapper .small-card-list-detail-image{
/background-size: 383px,518px, cover;/
max-width:100% !important;
max-height:75% !important;
background-repeat: no-repeat;
}
}

I’m not a coder, so I’m not sure how to fix it.

image
image1920×1214 83.3 KB

2

Hi Jay,

You need to target the classes for the featured list LFD.

Try this:

@media screen and (max-width: 500px){
  .new-small-h-card-list-container .small-h-card-list-detail-image, .small-h-card-detail-wrapper .small-h-card-list-detail-image{
    background-size: 383px,518px, cover;
    max-width:100% !important;
    max-height:75% !important;
    background-repeat: no-repeat;
  }
}

Hope this helps!

3

Hello! The code did change the overlay popup (but it’s now too small) and it made the thumbnail in the featured section much too big to fit.

image
image680×1426 126 KB

4

image
image680×1426 46.9 KB

5

And now the overlay image in the regular directory section is too big.

image
image680×1426 59.7 KB

6

Here is the size of the image I’m using. I made the template so that all of the logos would be the same size and shape to fit in the boxes.
image

7

It sounds like for the featured list you want to fix the image in the detail view only. Remove the code I mentioned in my original answer and use this:

.small-h-card-detail-wrapper .small-h-card-list-detail-image {
  height:50vh
}

This will only adjust the features list overlay image height. 50vh means 50% of the screen height. Feel free to play around with this number till it looks correct to you.

8

Thank you, that worked perfectly.