Remove main collection image from mobile only....possible?? HELP !!!!

[ApexMikey]

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

[makkaomakka]

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.

[ApexMikey]

Awesome, thank you.

I can modify/paste code, cannot do much else  🙂

https://www.apexanimalz.com

The theme is dawn.

Much appreciated,

M.

[makkaomakka]

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.

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

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 "</head>"

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

[ApexMikey]

Awesome it worked, iyt just has way too much space between the collection description text and the items below, any fix for that?

thanks !!!!

[makkaomakka]

Replace the above code with below 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>

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

[makkaomakka]

Hi @ApexMikey ,

Replace the above code with the below updated code.

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

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

[makkaomakka]

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

[makkaomakka]

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;
  }
}

[ApexMikey]

That is very odd....I have no idea why. I am also new here...
I appreciate you !

[makkaomakka]

Now my previous reply got deleted.

Please find updated code below:

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

 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

[ApexMikey]

You are welcome to reply directly also

info@apexanimalz.com

[makkaomakka]

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

[makkaomakka]

@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;
  }
}

[makkaomakka]

Add this codes to the theme file.

<style>
@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;
  }
}
</style>

[makkaomakka]

Please add below code to the theme.liquid file.

<style>
@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;
  }
}
</style>

[makkaomakka]

@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;
  }
}

[makkaomakka]

Hi @ApexMikey ,

Please add bellow CSS to the theme.liquid file.

<style>
@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;
  }
}
</style>

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 "</head>"

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

[makkaomakka]

<style>
    @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;
        }
    }
</style>

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!

[makkaomakka · Accepted solution]

Please add css provided by me on the theme.liquid file

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

[ApexMikey]

TY all great!

[makkaomakka]

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

[makkaomakka]

Try this code once. I have added important to the css.

<style>
@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;
  }
}
</style>