Hello
I have a slightly different problem, I hope you can help.
I want my main collection image to show on the top of collection page, but NOT on mobile. It looks much nicer on desktop BUT it makes the page too long on mobile.
Is there a way to fix this?
thank you
Hi @ApexMikey ,
As you haven’t mentioned which theme you are using, it’s difficult to give an exact solution. Could you please provide more information about the site?
Also, providing the link to your site would be helpful so that I can provide an appropriate solution.
Thank you.
Awesome, thank you.
I can modify/paste code, cannot do much else 
The theme is dawn.
Much appreciated,
M.
Hi @ApexMikey ,
Please you can hide the main collection image by adding below codes on the theme.liquid file.
IMPORTANT: Before making any changes on the theme files, please make sure to have a backup for the file.
Steps to add CSS:
Step 1: Go to Online Store > Themes > Active theme > Edit
Step 2: Search for “theme.liquid”
Step 3: Add the CSS above “”
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Mangit
Awesome it worked, iyt just has way too much space between the collection description text and the items below, any fix for that?
thanks !!!
Replace the above code with below codes.
If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Mangit
Hi @ApexMikey ,
Replace the above code with the below updated code.
If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Mangit
Hi @ApexMikey ,
To update the spaging for mobile device, please add below codes on the theme.liquid file. Replace this code with previous codes.
Thank you
Hi @ApexMikey ,
To update the spaging for mobile device, please add below codes on the theme.liquid file. Replace this code with previous codes.
<style>
@media only screen and (max-width: 600px) {
.collection-hero .collection-hero__image-container.media.gradient {
display: none;
}
.collection-hero--with-image .collection-hero__text-wrapper {
padding-bottom: 0px;
}
.section-template--21052531867970__product-grid-padding{
padding-top:5px;
}
}
</style>
Thank you
Hi @ApexMikey ,
I dont know why but i cannot reply to this thread. My reply gets deleted. FYI, I have updated the previous reply with updated code. Please follow accordingly.
@media only screen and (max-width: 600px) {
.collection-hero .collection-hero__image-container.media.gradient {
display: none!important;
}
.collection-hero--with-image .collection-hero__text-wrapper {
padding-bottom: 0px!important;
}
.section-template--21052531867970__product-grid-padding{
padding-top:5px!important;
}
}
That is very odd…I have no idea why. I am also new here…
I appreciate you !
You are welcome to reply directly also
Now my previous reply got deleted.
Please find updated code below:
If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Mangit
@media only screen and (max-width: 600px) {
.collection-hero .collection-hero__image-container.media.gradient {
display: none!important;
}
.collection-hero–with-image .collection-hero__text-wrapper {
padding-bottom: 0px!important;
}
.section-template–21052531867970__product-grid-padding{
padding-top:5px!important;
}
}
Add this codes to the theme file.
Please add below code to the theme.liquid file.
@media only screen and (max-width: 600px) {
.collection-hero .collection-hero__image-container.media.gradient {
display: none!important;
}
.collection-hero--with-image .collection-hero__text-wrapper {
padding-bottom: 0px!important;
}
.section-template--21052531867970__product-grid-padding{
padding-top:5px!important;
}
}
Try this code once. I have added important to the css.
Hi @ApexMikey ,
Please add bellow CSS to the theme.liquid file.
Steps to add CSS:
Step 1: Go to Online Store > Themes > Active theme > Edit
Step 2: Search for “theme.liquid”
Step 3: Add the CSS above “”
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Mangit