Collection description not showing on mobile

Hi there,

My collection descriptions are not showing on mobile, is there a way I can fix that?

Something on the code or shopify?

Desktop is okay, but mobile isn’t showing.

https://www.manukapharm.co.nz/collections/powder

https://www.manukapharm.co.nz/collections/manuka-honey

Thank you!

1 Like

Hi @maaferreirac

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > app.scss.css and paste this at the bottom of the file:
@media (max-width:767px){
.rte.collection-description.subtitle.s-hide {
display: block!important;
}
}

Hello @maaferreirac

You need to remove or change the property of the following CSS.

OLD CSS

@media (max-width: 1023px) {
  .template-collection .collection-header .collection-description {
    display: none;
  }
}

@media (max-width: 700px) {
  .s-hide {
    display: none !important;
  }
}

NEW CSS

@media (max-width: 1023px) {
  .template-collection .collection-header .collection-description {
    display: block;
  }
}

@media (max-width: 700px) {
  .s-hide {
    display: block !important;
  }
}

Attach Screenshot

For Tablet

For Mobile

Thank you

Hi @maaferreirac

Please go to your Online Store > Themes > Customize > Theme settings, open Custom CSS, add this code, save change and check again.

.template-collection .collection-header .collection-description {
display: block !important;
}

Hello @maaferreirac
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> app.scss.css
add this code at the bottom of the file.

@media (max-width:767px){
.rte.collection-description.subtitle.s-hide {
display: block !important;
}
}

adn the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks