Removing collection sidebar on Mobile in Supply Theme theme.scss.liquid

[TheGameSteward]

Hello,

We're trying and failing to figure out how to block!important or hide!important collection sidebar.  On why this is useful, our Cumulative Layout Shift (CLS) is shifted by the collection sidebar and it can't be seen anyway on almost any mobile device.  So we're trying to remove the collection sidebar entirely on mobile devices so that it is no longer part of our Cumulative Layout Shift (CLS) for Mobile.

Below are two of my failed attempts.  Can you help us?  Much thanks for your help advance.  Dan.

@_media only screen and (max-width: 600px){
  	collections.sidebar,
	.sidebar-linkks .hide-mobile,
	.sidebar-link .hide-mobile,
	.fun-links .hide-mobile,
  	.sidebar .hide-mobile,
    collections.sidebar.shop_by .hide-mobile,
  	collections.sidebar.all .hide-mobile,
  	collections.sidebar.all_collection .hide-mobile
  	{
    display: none!important;
	}
}

@_media only screen and (max-width: 600px){
  	collectionFilters.sidebar,
	.grid-item.large--one-quarter.collection-filters .hide-mobile
  	{
    display: none!important;
	}
}

[Ankit_R]

No need to change the css.

Just add a css class on sidebar html code.

I mean::

Change <aside class="sidebar grid-item large--one-quarter collection-filters" id="collectionFilters">
to <aside class="sidebar grid-item large--one-quarter small--hide collection-filters" id="collectionFilters">

It will work!

[KetanKumar]

@TheGameSteward 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[TheGameSteward]

Hi Ketan Kumar

This is the link to our web page 

Much thanks for your help,

Dan

[TheGameSteward]

Thanks Ankit,

You wrote to change

<aside class="sidebar grid-item large--one-quarter collection-filters" id="collectionFilters">

to

<aside class="sidebar grid-item large--one-quarter small--hide collection-filters" id="collectionFilters">

Apologies, but could you reply with how to stipulate this to effect Mobile screens only?  (as we don't wish to remove or hide the collection sidebar for non-Mobile.)

Much Thanks,

Dan

[TheGameSteward · Accepted solution]

Hello,

To hide a collection side-bar on Shopify Supply Theme, the following code was given to us from Shopify Support

@media only screen and (max-width: 768px){
.collection-filters.sidebar {
display: none!important;
}
}

Dan

www.thegamesteward.com

---