Gray area collection grid and image size Debut Theme

Store Design
1

There is a gray area when the logo displays I will like to have this white instead of gray. Please let me know I can probably add some coding to the theme.scss.

I also would like for all logos to adjust to the size like a little square, since right now it goes full size so you can’t see the whole logo as in the example.

Logo is chopped off

Screen Shot 2023-06-09 at 7.22.30 PM.png
Screen Shot 2023-06-09 at 7.22.30 PM.png588×598 91.2 KB

Gray area

Screen Shot 2023-06-09 at 7.15.59 PM.png
Screen Shot 2023-06-09 at 7.15.59 PM.png1260×958 167 KB

I would like this to be like this at he bottom.

Screen Shot 2023-06-09 at 7.16.33 PM.png
Screen Shot 2023-06-09 at 7.16.33 PM.png1178×1070 212 KB

1 Like
2

Hi @shopcigarsnow

Please provide your website so we can provide a code appropriate for you

3

www.shopcigarsnow.com

pass absolute

1 Like
4

Hi @shopcigarsnow

Thank you for the information

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the theme.scss file
  3. At very end of the code, add the code below
.collection-grid .collection-grid-item__overlay.box.ratio-container {
    background-size: contain;
    background-position: center;
    background-color: transparent;
}

Result here:

made4Uo_0-1686356509238.png
made4Uo_0-1686356509238.png1386×928 192 KB

1 Like
5

Perfect. it works right away.

How about to make the logo same size to fit in the box?

Thanks in advance

6

Never mind both things are fixed. I appreciate it. thank you

1 Like
7

I have a question I have a small scrolling bar now. Do you know how to get rid of this?