How to change the collection banner size on mobile? Banner is cropped when viewed on mobile.

[shwetart]

The collection banner on desktop is perfect but when the same banner is cropped when viewed on mobile. can someone help me here?

[pioneer100 · Accepted solution]

@shwetart 
- please add following code at the bottom of the file theme.scss.liquid.

File Path: online store > themes > live theme > action > edit code > assets > theme.scss.liquid

@media only screen and (max-width: 600px) {
.collection__image-wrapper--small {
    height: 96px !important;
}
.collection__image{
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
}

[dmwwebartisan]

@shwetart 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

[pioneer100]

yes, please provide the web url here @shwetart 

[shwetart]

www.mystiqliving.com

[pioneer100 · Accepted solution]

@shwetart 
- please add following code at the bottom of the file theme.scss.liquid.

File Path: online store > themes > live theme > action > edit code > assets > theme.scss.liquid

@media only screen and (max-width: 600px) {
.collection__image-wrapper--small {
    height: 96px !important;
}
.collection__image{
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
}

[shwetart]

Thank you so much .. it fit exactly

[shwetart]

Thank you for the solution , but I have another problem here. The size though now fits well for mobile view, I had not realised that on desktop the view is also cropped:(. 

The size of the category banner is 2000*450

please check this on desktop - https://www.mystiqliving.com/collections/specials

[dmwwebartisan]

@shwetart 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (min-width: 641px) {
.collection__image-wrapper--small {height: 320px !important;}
}

 Hope this works.
Thanks!

[shwetart]

I amended the code but now the sides are cropped.. the height is fine but not the width

[dmwwebartisan]

can you share screenshot please?

[shwetart]

[dmwwebartisan]

@shwetart 

Please add the following code at the bottom of your assets/theme.scss.liquid file

@media screen and (min-width: 641px) {
.collection__image {
    height: 100%;
    background-size: contain;
    background-position: center;
    width: 100%;
    background-repeat: no-repeat;
}
}

Hope this works.
Thanks!

[dmwwebartisan]

also add this CSS  without  @media 

.collection__image {
    height: 100% !important;
    background-size: contain !important;
    background-position: center !important;
    width: 100% !important;
    background-repeat: no-repeat !important;
}

Hope this works.
Thanks!

[shwetart]

@dmwwebartisan 

thank you but there are blocks at the 2 ends 

[dmwwebartisan · Accepted solution]

@shwetart 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (max-width: 640px) {
.collection__image-wrapper--small {height: 82px !important;}
.collection__image {
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}

Hope this helps.

Thanks!

[shwetart]

Thank you so much ... 

[dmwwebartisan]

@shwetart 

If helpful then please Like and Accept Solution.

[arung]

Can you help me to get perfect banner size for my site innofur.com

[arung]

Can you help me to have perfect banner size for mobile site is www.innofur.com