How can I hide labels in Debut theme collections?

[GregoryKika]

Hello everyone, 

I'm having problems with hiding the "labels" bar in the left side of the page. I would like to be able to use the labels as metadata, without them showing in the webpage.

I basically want to remove the part that says :

COMPRAR POR

• Limpieza
• Piel

I'm using Debut theme.

I already tried using

.product-single__meta .single-option-radio__label {
    display: none;
}

The post I got the code from says I need to use it on the theme.scss.liquid asset section, I did it but it does not appear to work.

This it the link to the page, the labels are only in that product because I'm trying to solve the problem first, but the idea would be to have this change affect the whole page.

Link Kika 

[dmwwebartisan]

@GregoryKika 

Please try this code

@media only screen and (min-width: 769px){
 .template-collection .large--four-fifths {
    width: 100%;
}

.template-collection .grid-border--left {
    border-left: 0px solid transparent;
}

.template-collection .large--one-fifth {
    width: 0%;
    display: none;
}
}

[Zworthkey]

@GregoryKika 
Paste this code on top of the theme.scss file.

aside#collectionFilters {
    display: none !important;
}

Thank You.

[GregoryKika]

Hey there, thanks for the answer!
It fixed the problem, but there seems to be an issue with the design now

The products don't reach the far end of the page (where it says CARRITOS)

This is the design, where it reaches the "end" of the page.

Any idea on how to fix this?

[oscprofessional]

Hi @GregoryKika ,

On this page the size of the image is different, when you resize it with others then it will look fine !

[Zworthkey]

@GregoryKika 
Paste this code on top of the theme.scss file.

@media only screen and (min-width: 992px) {
div#CollectionSection {
    width: 133% !important;
    margin-left: -16% !important;
}
}

[dmwwebartisan]

@GregoryKika 

Please try this code 

.template-collection .wrapper {
    max-width: 100% !important;
}

Thanks!

[oscprofessional · Accepted solution]

@GregoryKika ,

Hi

aside#collectionFilters {
    display: none;
}
 .template-collection .large--four-fifths {
    width: 100%;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

[GregoryKika]

The solution from oscprofessional worked great!

Thank you very much 🙂

[BootlegCraig]

Hi there! I'm trying to do the same, but I don't have a "theme.css.liquid" file in my assets folder. What I'm after is to have my collections just be images as the image has the collection name in it so it's not necessary to have the name of the collection in text over them. 

[dmwwebartisan]

@BootlegCraig 

Please share your theme URL.

Thanks!