How do I increase the size of collection image on homepage for debut theme

Store Design
1

Hello

My website is Joododecor.com

I am trying to make the best seller images and also the collection image bigger on the home page. How can i correct this please? is there any code i can add to the theme.css to change this?

1 Like
2

@Misusab

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.grid-view-item__image-wrapper {
width: 100%;
    max-width: 100% !important;
}
.grid-view-item__image-wrapper div {
    padding-top: 133% !important;
}
.grid-view-item__image {
max-width: 100% !important;
    max-height: 100% !important;
    height: 100%;
    object-fit: cover;
}
.collection-grid {
max-width: 100%;
}
3

hello @Misusab

do you want to look like this https://nimb.ws/kz5U0Z

4

Yes! @Kinjaldavra that’s what i am trying to achieve. Both the collection and the best seller images. i want it to fill up the space and fit well under the header image.

5

@Misusab

yes please use above code

6

hello @Misusab please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-161950532321fc02bb .grid  .grid__item .grid-view-item__image-wrapper
 {
      max-width: 100% !important;
 }
 #shopify-section-161950532321fc02bb .grid  .grid__item .grid-view-item__image 
  {  
     max-width: 100% !important;
     max-height: 100% !important;  
     height: 100%;
     object-fit: cover;
}
#shopify-section-161950532321fc02bb .grid-view-item__image-wrapper div 
{
    padding-top: 150% !important;
}
7

Thank you @KetanKumar and @Kinjaldavra both codes worked!

1 Like
8

@Misusab

thanks can you please If helpful then please Like and Accept Solution.

in future someone used this code