HELP - Image not resizing for mobile view

Store Design
1

I seem to be having an issue on my website (www.crossremedies.com) where my one of my images in the Gallery Section does not resize properly in mobile view. Can someone help me out with this? Thank you!

1 Like
2

Share screenshot, which gallery you are talking about

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
@media only screen and (max-width: 749px){
div#shopify-section-162601394431dfb56d .image-bar__item.image-bar__item--162601394431dfb56d-2.box.ratio-container.lazyloaded {
height: 37vw;
}
div#shopify-section-162601394431dfb56d .image-bar {
max-width: 100%;
}
}
1 Like
4

@ZhiXiong

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
/* for mobile css */
@media only screen and (max-width: 749px){
div#shopify-section-162601394431dfb56d .image-bar__item.image-bar__item--162601394431dfb56d-2.box.ratio-container.lazyloaded {
height: 37vw;
}
div#shopify-section-162601394431dfb56d .image-bar {
max-width: 100%;
}
}

/* for desktop css */
@media only screen and (min-width: 750px){
.image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
    height: 525px !important;
}
.image-bar__item {
    background-size: contain;
}
}

Thanks!

1 Like
5

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

6

Hello!

I am having a similar issue with one of our collections. I added an image to the description of one of our collections and it looks great on the desktop version, but the mobile version is not resizing the image therefor it looks way too big. Is there a way to resolve this?

URL: https://www.theclosettradingco.com/collections/tctc-x-cancer-cartel

1 Like
7

@tctc2021

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >styles.css and paste this at the bottom of the file:
img {
    border: 0;
    width: 100% !important;
    height: auto !important;
}

Thanks!