How can I effectively resize images on my homepage?

Store Design
1

The images on my homepage are too large. I’ve tried re-sizing them but nothing changes. I see on your YouTube videos that they show how to change code to re-size but they do not say if that’s for changing sizes on the homepage. Is that the way to do it? BTW, I assume changing the image size is lowering the pixel counts. Is that not the case?

2

Hi @bobkap ,

Please share your store URL and password of front view. Can you tell us the position of image you want to change?

So that I will check and let you know the exact solution here.

Best regards.

3

Hello,

www.goldcreekapparel.com The homepage image of 3 people standing next to
each other facing forward.

Thanks,
Bob

4

Hi @bobkap ,

You can try follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Asset → create separate css file for css code then paste code below in the file.
    Ex: /custom.css
.media>*:not(.zoom):not(.deferred-media__poster-button){
  object-fit: contain !important;
}
.banner--adapt {
  height: 500px !important;
}
@media screen and (min-width: 750px){
  .banner__media {
    height: 500px  !important;
  }
}

Screenshot_123.png
Screenshot_123.png1883×585 44.6 KB

  1. Layout → /theme.liquid → paste code below into the tag of the file:
{{ 'custom.css' | asset_url | stylesheet_tag }}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

IT WORKED!! Thanks very much. Not to push my luck, but when I make it the
size I want, it runs over my footnote that’s on every page. Might you know
how I would fix that too please?

Bob Kaplan

6

Hi @bobkap ,

You can try change the css code above in the file custom.css with the below code.

#Banner-template--15791798616305__image_banner .media>*:not(.zoom):not(.deferred-media__poster-button){
  object-fit: contain !important;
}
#Banner-template--15791798616305__image_banner.banner--adapt {
  height: 500px !important;
}
@media screen and (min-width: 750px){
  #Banner-template--15791798616305__image_banner .banner__media {
    height: 500px  !important;
  }
  .footer {
    margin-top: 100px;
  }
}

Screenshot_2.png
Screenshot_2.png1873×574 45.5 KB

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

Hello Halothemes.

I tried this solution, but it didn´t work.

Not only I wasn´t able to change the image size, but also some errors came up.

The favicon is not showing anymore, and there is a gray gap between the search bar and the header of my store. Do you know what might have happened?

Thanks