# Changing photo size on overlay screen for Featured List Screen

**URL:** <https://community.fliplet.com/t/changing-photo-size-on-overlay-screen-for-featured-list-screen/190>\
**Category:** Get Help\
**Created:** [October 27, 2021, 9:40pm UTC](https://community.fliplet.com/t/changing-photo-size-on-overlay-screen-for-featured-list-screen/190 "2021-10-27T21:40:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jay](https://avatars.discourse-cdn.com/v4/letter/j/ed8c4c/32.png) [@Jay](https://community.fliplet.com/u/Jay)\
**Post date:** [October 27, 2021, 9:40pm UTC](https://community.fliplet.com/t/changing-photo-size-on-overlay-screen-for-featured-list-screen/190/1 "2021-10-27T21:40:42Z")

</div>

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](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/68c50913469c188f5c55107f3c98267c596c4918.jpeg)

---

<div class="post-metadata">

**Author:** ![Deb](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/deb/32/159_2.png) [@Deb](https://community.fliplet.com/u/Deb)\
**Post date:** [October 29, 2021, 11:14am UTC](https://community.fliplet.com/t/changing-photo-size-on-overlay-screen-for-featured-list-screen/190/2 "2021-10-29T11:14:21Z")

</div>

Hi Jay,

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

Try this:

```auto
@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!

---

<div class="post-metadata">

**Author:** ![Jay](https://avatars.discourse-cdn.com/v4/letter/j/ed8c4c/32.png) [@Jay](https://community.fliplet.com/u/Jay)\
**Post date:** [October 29, 2021, 11:48am UTC](https://community.fliplet.com/t/changing-photo-size-on-overlay-screen-for-featured-list-screen/190/3 "2021-10-29T11:48:40Z")

</div>

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](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/97e1e30aa171f882ebf0cfb4789a3737e3186e1f.jpeg)

---

<div class="post-metadata">

**Author:** ![Jay](https://avatars.discourse-cdn.com/v4/letter/j/ed8c4c/32.png) [@Jay](https://community.fliplet.com/u/Jay)\
**Post date:** [October 29, 2021, 11:49am UTC](https://community.fliplet.com/t/changing-photo-size-on-overlay-screen-for-featured-list-screen/190/4 "2021-10-29T11:49:32Z")

</div>

![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/42597b75ef8ba273c5d582cf61cb6f3d957e5e6c.png)

---

<div class="post-metadata">

**Author:** ![Jay](https://avatars.discourse-cdn.com/v4/letter/j/ed8c4c/32.png) [@Jay](https://community.fliplet.com/u/Jay)\
**Post date:** [October 29, 2021, 11:50am UTC](https://community.fliplet.com/t/changing-photo-size-on-overlay-screen-for-featured-list-screen/190/5 "2021-10-29T11:50:21Z")

</div>

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

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/36394841559fb1444d222f1f2c39c3fee95c34c7.jpeg)

---

<div class="post-metadata">

**Author:** ![Jay](https://avatars.discourse-cdn.com/v4/letter/j/ed8c4c/32.png) [@Jay](https://community.fliplet.com/u/Jay)\
**Post date:** [October 29, 2021, 11:52am UTC](https://community.fliplet.com/t/changing-photo-size-on-overlay-screen-for-featured-list-screen/190/6 "2021-10-29T11:52:40Z")

</div>

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](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/b64e96118da8d6e4b32160e2fb65df44ce048665.png)

---

<div class="post-metadata">

**Author:** ![Deb](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/deb/32/159_2.png) [@Deb](https://community.fliplet.com/u/Deb)\
**Post date:** [November 3, 2021, 11:42am UTC](https://community.fliplet.com/t/changing-photo-size-on-overlay-screen-for-featured-list-screen/190/7 "2021-11-03T11:42:52Z")

</div>

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:

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

---

<div class="post-metadata">

**Author:** ![Jay](https://avatars.discourse-cdn.com/v4/letter/j/ed8c4c/32.png) [@Jay](https://community.fliplet.com/u/Jay)\
**Post date:** [November 3, 2021, 1:44pm UTC](https://community.fliplet.com/t/changing-photo-size-on-overlay-screen-for-featured-list-screen/190/8 "2021-11-03T13:44:13Z")

</div>

Thank you, that worked perfectly.