How do you hide collection descriptions on mobile?

New Member
2 0 0

Hello! I'm using the theme Ella, but this is more a general CSS question.

 

I need to hide my collection descriptions on smaller screens because they push the products too far down.

While trying different things, I've successfully hidden collection titles on smaller screens by pasting the following:

 

<style>
@media only screen and (min-width: 751px) {
h1 {
display: none;

}
}
</style>

 

But titles are not what I want to target.
I've tried replacing "h1" with things like "collection-des" hoping the effect would just transfer to the description text, but no luck.

 

I'm new to CSS so I've just been taking stabs in the dark hoping something will work. Can anyone please recommend a better way to structure the CSS text between the style tags so that this may actually hide the collection descriptions? Thank you in advance.

0 Likes
Shopify Expert
20 3 4

Hey ColtonR, 

 

You're on the right track. Do you have a URL handy so I can see the live site?

https://enjoythemecompany.com/
0 Likes
New Member
2 0 0

Thanks for the response.

URL to homepage: https://buddylove.com/

URL to a collection page with a description: https://buddylove.com/collections/dresses

0 Likes
Astronaut
1069 145 260

Yeah you wouldn't want to hide all of your h1 tags this way, if for any reason you end up using h1 tags in the future. What you could do is find where your collection description is output in your code. This will be in collection.liquid in your templates folder, but often leads to another file in your sections folder called collection-template.liquid -- It really depends on the theme though. Go to your collection.liquid file and Ctrl + F and search for "collection.description". If you can't find it, if you see something like this:

 

{% section 'collection-template' %}

 

That's referencing the file in the section folder I was talking about. Open that file and search for collection.description again. If you find it, it will probably be surrounded by some html element tags. You can add a class name to your elements to target with css (it doesnt matter what kind of element it is. Could be a div, could be a span, could be a list item, etc). So lets say it looks like this:

 

<div>{{ collection.description }}</div>

 

You can add a class name to that:

 

<div class="hide-on-mobile">{{ collection.description }}</div>

Which you can then in turn hide with css:

 

<style>
@media (max-width: 751px){
.hide-on-mobile {
display: none;
}
}
</style>

Let's just assume it already has a class name though, because it probably will. You can add multiple classes to html elements by just adding a space between the last one. Let's say it looked like this:

 

<div class="collection_description">{{ collection.description }}</div>

You could add a class name to that like this:

 

<div class="collection_description hide-on-mobile">{{ collection.description }}</div>

I'd also suggest doing this same thing to your your collection title's as opposed to what you've already done. What you have now ensures that NO h1 elements will ever show up on your site on mobile, which will most likely be used in page.liquid and cart.liquid as well.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
2 Likes