Debut Theme Featured Product - Photo out of place and too small

Jharrison98
New Member
5 0 0

Hello,

 

The store url: https://www.inspiredbysierra.com/

The featured product is displayed at the bottom: 

2 PC Amethyst Healing Stones

 

Please help so that when I want to set any product as a featured product the image is aligned properly.

 

Thanks,

0 Likes
dmwwebartisan
Shopify Partner
5699 1303 1669

@Jharrison98 

Please upload Same size image .

Shopify has set limits for images of 4472 by 4472 pixels (20 Megapixels) and file sizes of up to 20 MB.  

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
g33kgirl
Shopify Partner
211 51 64

Hi @Jharrison98, you seem to have already set some styles in place. May I know the reason why as that will help me understand and solve your problem better.

This style has been set in your code:

 

#FeaturedImage-1619673484795fde5c-19373434536089 {
    max-width: 398.328125px;
    max-height: 530px;
  }

  #FeaturedImageZoom-1619673484795fde5c-19373434536089-wrapper {
    max-width: 398.328125px;
  }

 

 

To fix your image issue, remove the above styles^ from your code.

 

If you cannot remove for whatever reason, then add the following code at the very end of your CSS file (Themes -> Edit code -> Assets -> theme.scss.css) :

 

#FeaturedImageZoom-1619673484795fde5c-19373434536089-wrapper {
    width: 100%;
    max-width: 100% !important;
}

#FeaturedImageZoom-1619673484795fde5c-19373434536089 {
  padding-top: 0 !important;
}

#FeaturedImage-1619673484795fde5c-19373434536089 {
    max-width: 100% !important;
    max-height: 100% !important; 
    width: 100%;
}

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
Natztech
Shopify Partner
597 152 366

@Jharrison98 
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. see look like this   http://prnt.sc/128mqek

@media only screen and (min-width: 1024px){
.template-index  #shopify-section-161946141416bde844  .grid-view-item__image-wrapper {
    max-width: 100%  !important;
    max-height: 342px  !important;
}
 .template-index  #shopify-section-161946141416bde844 .grid-view-item__image{
    max-width: 100% !important;
    max-height: 100% !important;
}
  .template-index  #shopify-section-161946141416bde844 .grid--view-items {
    overflow: unset;
}  
}          
 

  

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Jharrison98
New Member
5 0 0

none of the options mentioned above worked, could it possibly be because the file is theme.scss.liquid?

0 Likes
Jharrison98
New Member
5 0 0

Also, I was unable to find this code.

 

#FeaturedImage-1619673484795fde5c-19373434536089 {
    max-width: 398.328125px;
    max-height: 530px;
  }

  #FeaturedImageZoom-1619673484795fde5c-19373434536089-wrapper {
    max-width: 398.328125px;
  }

@g33kgirl  

0 Likes
Natztech
Shopify Partner
597 152 366

yes in this file you have to insert in to bottom of this theme.scss.liquid  file 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Jharrison98
New Member
5 0 0

@Natztech  I did paste in the code your provided at the bottom of theme.scss.liquid and the image is still out of place

0 Likes
g33kgirl
Shopify Partner
211 51 64

Yes, theme.scss.liquid is the same file as theme.scss.css. You need to add this code at the end of your CSS file (which is theme.scss.liquid) :

#FeaturedImageZoom-1619673484795fde5c-19373434536089-wrapper {
    width: 100%;
    max-width: 100% !important;
}

#FeaturedImageZoom-1619673484795fde5c-19373434536089 {
  padding-top: 0 !important;
}

#FeaturedImage-1619673484795fde5c-19373434536089 {
    max-width: 100% !important;
    max-height: 100% !important; 
    width: 100%;
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
Jharrison98
New Member
5 0 0

Awesome! So, that did partially work. The problem I am now encountering is when I change the product the image is small again. So the size adjustment only works for that one picture. Is there any way you could help? @g33kgirl 

0 Likes