Archived topic
class attribute not working
3 replies · Started by Cynthia on April 2, 2023
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
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 :)
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?
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.
