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

Solved
shwetart
Excursionist
14 0 5

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

Accepted Solutions (2)

Accepted Solutions
pioneer100
Shopify Partner
1102 145 481

This is an 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;
}
}

 

 

 

If helpful, Please Like and accept The Solution.

View solution in original post

dmwwebartisan
Shopify Partner
9765 2228 3065

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 18 (18)
dmwwebartisan
Shopify Partner
9765 2228 3065

@shwetart 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
pioneer100
Shopify Partner
1102 145 481

yes, please provide the web url here @shwetart 

If helpful, Please Like and accept The Solution.
pioneer100
Shopify Partner
1102 145 481

This is an 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;
}
}

 

 

 

If helpful, Please Like and accept The Solution.

View solution in original post

dmwwebartisan
Shopify Partner
9765 2228 3065

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

shwetart
Excursionist
14 0 5
dmwwebartisan
Shopify Partner
9765 2228 3065

@shwetart 

If helpful then please Like and Accept Solution.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
shwetart
Excursionist
14 0 5

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