[Support request] class attribute not working

[Cynthia]

I am trying to add 40px of padding under a photo but I only want to apply 10px padding-bottom on mobile view so I created a class called winners. This is what I have but it’s not doing anything:

CUSTOMIZER PANEL – CSS:

.winners {
padding-bottom:40px !important;
}

@media (max-width: 768px) {
.winners {
padding-bottom:10px !important;
}
}

The webpage has been added in private area

[Leo]

Hi there,

This wouldn’t be a theme-related issue.

I don’t see the CSS being added and I’m guessing that it’s because there are syntax errors in your previous CSS.

For example, none of the code here has a ; at the end:
https://www.screencast.com/t/PBoqMSAiyR

You can use a service like this to check the errors:
https://jigsaw.w3.org/css-validator/#validate_by_input

Hope this helps 🙂

[Cynthia]

I’m not generating that code that you provided. I am using Site Origin Page Builder in conjunction with GP. I’m not sure what would be causing that or how to access that code to add the needed ;

So I do have my css and class written correctly? It is the synax error that is not allowing my class to work?

[Leo]

The CSS mentioned doesn’t look like it’s added by site origin but I could be wrong:
https://www.screencast.com/t/SRk3CnaCy

Please check with their support team.

The class is added correctly:
https://www.screencast.com/t/BUgbzmx8

But I’m not seeing the CSS being applied so I still think syntax error is the issue.

Please be mindful that this is strictly a CSS question that isn’t theme-related so you will need to take further actions to debug.

[Author]

Posts