[Resolved] Targetiing specific site with CSS problems

[Jacek.maslinski]

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 🙂

[David]

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 🙂

[Jacek.maslinski]

It worked, thank you very much for your help and explanation 🙂

[David]

You’re welcome

[Author]

Posts