Solved

Resizing image to fit image banner at Dawn

Kuper
Excursionist
14 1 4

Hi there,

 

I am trying to fit my image to the image banner on the Dawn theme, this is my URL:
https://dingastreetfashion.myshopify.com/?_ab=0&_fd=0&_sc=1

 

I have tried using the image resizer on the original image but id does not have any effect on the image, which is being cropped exactly the same, no matter how I resize the image.
The 'adapt image check box' makes the image looks to big, I just want it to fit to the medium banner height.

 

Thanks 

Accepted Solution (1)
Kuper
Excursionist
14 1 4

This is an accepted solution.

I actually ended up using a similar code that I already inserted to my theme.liquid file:

  <style>
  [id*='section'][id*='image']{
      max-width: 40%;
      width: 100% !important;
      margin: 0 auto !important;
  }
  
  @media (max-width: 749px){
      [id*='section'][id*='image']{
      max-width: 100%;
  }
  }
  </style>

So if anyone has the same issue just paste this in theme.liquid above the </body> written at the bottom, and use the 1'st max-width parameter to change the size of the banner.

View solution in original post

Replies 9 (9)

JustinTharpe
Shopify Partner
142 5 17

Hi @Kuper 

 

I couldn't check the issue - as your store is password protected.

Please Like and Accept Solution if Useful.
The two picks of this month: Shipping Address Editor and Product Customizer
Shopify Community Helper
Kuper
Excursionist
14 1 4

Hi @JustinTharpe
I removed the password, please give it another try.

 

Thanks

JustinTharpe
Shopify Partner
142 5 17

I can see the image is too big.

 

Try adding these styles to bring down the size a little bit.

 

[id*='section'][id*='image'] {
    max-width: 50%;
}
Please Like and Accept Solution if Useful.
The two picks of this month: Shipping Address Editor and Product Customizer
Shopify Community Helper
Kuper
Excursionist
14 1 4

This is an accepted solution.

I actually ended up using a similar code that I already inserted to my theme.liquid file:

  <style>
  [id*='section'][id*='image']{
      max-width: 40%;
      width: 100% !important;
      margin: 0 auto !important;
  }
  
  @media (max-width: 749px){
      [id*='section'][id*='image']{
      max-width: 100%;
  }
  }
  </style>

So if anyone has the same issue just paste this in theme.liquid above the </body> written at the bottom, and use the 1'st max-width parameter to change the size of the banner.

Kuper
Excursionist
14 1 4

@JustinTharpe 
But on a slightly different subject, do you know maybe why the image banner color is slightly darker than the color around it?
Seems like it has an opacity around it, but I set the opacity of the image banner to 0 in the customization.

celstone
New Member
4 0 0

There is an opacity slider in the image banner settings. Set that to zero. Took me forever to find this! LOL!

scrace
Tourist
3 0 0

This works for one image banner on the page.

 

How can I apply this code to all image banners on the page? 

celstone
New Member
4 0 0

I am having the same problem, but my issue is width the height of the image, not the width. I have reseized it multiple times in PS and it STILL cuts off the bottom of my image. How do I change the container size for the image?

mxrkis
Tourist
3 0 0

I changed the max-width: 40% 
to 
max-width: 1100px  
pixels instead of percentage! saved my week from spiraling into madness!