Archived topic
Targetiing specific site with CSS problems
3 replies · Started by Jacek.maslinski on March 14, 2020
Hello, I am using "Mellow" template from site library.
It has setup this CSS customization.
@media (max-width: 768px) {
#page{
margin: -75px 15px 0 15px;
}
}On one specific page I try to change this setting but it does not work form me, maybe you could help me ?
I know basic html/css and tried using some of this combinations and Simple CSS plugin mentioned in another topic but nothing seems to work. It is some test page, but I would be glad if you could help me to learn something new.
@media(max-width: 768px) {
.page.page-id-188 {
margin: 0px;
}
}
@media (max-width: 768px)
#page.page-id-188{
margin: 0px;
}
@media (max-width: 768px) {
.page:not(.page-id-188){
margin: -75px 15px 0 15px;
}
}
The link I attached is pointing to the specific page(page-id-188) which I would like to change. Because of some other site settings this effect works on bigger screens, problem occurs only on mobile.
Thank you for your time :)
Hi there,
try this CSS:
@media (max-width: 768px) {
.page-id-188 #page {
margin: 0;
}
}the page-id-188 is a CSS Class attribute of the body tag element.
Inside the body we have the #page container.
So this selector: .page-id-188 #page says find me the #page element thats within a container that has a class of .page-id-188 :)
It worked, thank you very much for your help and explanation :)
You're welcome
