Product page edit / Debut theme

Solved
Highlighted
Excursionist
44 0 7

Hello, 

I need to make the images in the product page bigger to fill the whole page like the red dotted square. Because they are too small.

Is there any way to do that? URL: https://orchidpresets.com/collections/lightroom-presets-mobile

A help would be appreciated.

Thanks!

 

ffff.JPG

 

 

0 Likes
Highlighted
Shopify Partner
406 56 91

This is an accepted solution.

PLease place this code at the end of theme.scss

.grid-view-item__image {
position: inherit;
    max-width: none;
    max-height: none;
}
.grid-view-item__image-wrapper > div {
    padding-top: 0%;
    position: relative;
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like
Highlighted
Excursionist
44 0 7

I copied the code but nothing happens! 

I found this in the code, I think I should edit something here, right? Is there anything else can I edit in it? Thanks for the help

 

.collection-grid-item__title {
  color: $color-overlay-title-text;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  padding: 0 5px;
  @include transform(translateY(-50%));
  transition: $transition-link-hover;
  text-shadow: 0 0 4px $color-text-shadow;
  hyphens: auto;

   $font-bold-titles {
    font-weight: $font-weight-header--bold;
  }

  @include media-query($medium-up) {
    padding: 0 15px;
  }
}

.collection-grid-item__link {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  &:hover,
  &:focus {
    .collection-grid-item__title-wrapper::before {
      opacity: $hover-overlay-opacity;
    }
  }

  &:focus {
    opacity: 1;
  }
}

.collection-grid-item__overlay {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;

}

.collection-grid-item__title-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $color-image-overlay;
  opacity: $opacity-image-overlay;
}

 

 

0 Likes
Highlighted
Shopify Partner
406 56 91

Online store -> Themes -> Assets -> theme.scss.liquid

 

paste the code at the end of theme.scss.liquid

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like
Highlighted
Excursionist
44 0 7

Yes, I copied it there but nothing happened. 

0 Likes
Highlighted
Shopify Partner
406 56 91

This is an accepted solution.

.grid-view-item__image {
position: inherit !important;
    max-width: none !important;
    max-height: none !important;
}
.grid-view-item__image-wrapper > div:first-child {
    padding-top: 0% !important;
    position: relative !important;
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like
Highlighted
Shopify Partner
406 56 91

This is an accepted solution.

Also add this property

.grid-view-item__image-wrapper {
max-width: none !important;
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like
Highlighted
Excursionist
44 0 7

Ok it works ! Thank you so much Param for your help! 

0 Likes