Hi, I’m having trouble with the Collection Banner on my Collections page template. I like how it looks on desktop with it pulling in both the collection description and the collection image. The problem I’m having is how it looks on mobile and there are a couple of problems which I’ve tried various solutions to but nothing is quite working the way I want it to. I’d really appreciate it if anybody could help!
Here’s how the collection banner is displaying on mobile currently:
What I want to do is:
-
Make the image display first with the collection title & description underneath
-
Make the image full width if possible
-
Reduce the spacing between the elements so there aren’t such big gaps at the top of the page, between the text and the image and at the bottom before the product listings.
-
Stop the image being blurry on mobile (for some reason it is a little blurry on mobile but I can’t see any reason why it should be doing that as it is great quality on desktop)
Here’s a mockup to show what I’m trying to get to:
Can anybody help with this?
Here’s a link to the site at the moment (still in development) - https://18f0de-2.myshopify.com/collections/all-originals
Hi @kbroadhurst Thank you for sharing the url and also being detailed enough as to what you need. Here you go. Open the base.css file from your theme code editor and paste this at the bottom of everything.
@media(max-width:749px){
.collection-hero__inner {
flex-direction: column-reverse;
padding-inline: 0;
}
.collection-hero–with-image .collection-hero__text-wrapper {
padding: 2rem 15px !important;
}
}
Try this out. Hope this helps your cause
Thank you very much. That looks much better with a full width image and less of a gap between the elements. The image is still showing below the Collection Title & Description text. Is it possible to get it to display at the top instead? It’s not a huge problem if not but I do prefer the look of having the image first for mobile as it would better match the look of other image banners on pages across the site. Thanks for your help!
The code i gave earlier change it to this?
@media(max-width:749px){
.collection-hero__inner {
flex-direction: column-reverse !important;
padding-inline: 0;
}
.collection-hero–with-image .collection-hero__text-wrapper {
padding: 2rem 15px !important;
}
}
Thank you! That’s just what I had wanted. Is it possible to reduce the padding at the bottom? There is quite a big gap between the end of the text and where the product listings begin. I’d like to make that smaller if possible.
Hi @Shadab_dev Thanks again for your help with this. Thought I’d attach an image so you can see where the gap is that I’d like to reduce if possible. Its the gap between the bottom of the collection description and the filters for the product listings. Do you know how I could make this gap smaller?
Also keen to know if you had any thoughts on why the collection banner images are blurry on mobile? They look great on desktop but blurred on mobile. I’ve tried a few different image sizes but it doesn’t seem to make a difference. If you have any tips I’d be very grateful!
Thanks again.
This should do it. Change my code to this. I actually updated it but the reply wasn’t sent. Here you go
@media(max-width:749px){
.collection-hero__inner {
flex-direction: column-reverse !important;
padding-inline: 0;
margin-bottom:-40px !important;
}
.collection-hero–with-image .collection-hero__text-wrapper {
padding: 2rem 15px !important;
}
}
As for the image being blurry, not good with that.
Thank you, that looks just how I wanted. I will raise a separate question about the images and see if anybody has thoughts about that. Really appreciate your help/
Glad I could be of help.
And thanks for the tip.
Also I love your site how clean it is, particularly the green colour base you have used.
Good luck on your store and your business.
Thanks
