FROM CACHE - en_header

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
1119 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
10746 2343 3341

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
10746 2343 3341

@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
1119 145 481

yes, please provide the web url here @shwetart 

If helpful, Please Like and accept The Solution.
pioneer100
Shopify Partner
1119 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.
dmwwebartisan
Shopify Partner
10746 2343 3341

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 →
shwetart
Excursionist
14 0 5
shwetart
Excursionist
14 0 5
dmwwebartisan
Shopify Partner
10746 2343 3341

@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

 

dmwwebartisan
Shopify Partner
10746 2343 3341

@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!

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

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

dmwwebartisan
Shopify Partner
10746 2343 3341

can you share screenshot please?

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 →
dmwwebartisan
Shopify Partner
10746 2343 3341

@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!

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 →
dmwwebartisan
Shopify Partner
10746 2343 3341

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!

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

@dmwwebartisan 

thank you but there are blocks at the 2 ends Screenshot (58).png

 

arung
New Member
6 0 0

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

 

arung
New Member
6 0 0

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