Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Media queries in wordpress child theme not being recognised

Has anyone had this problem before? The rest of my child theme styles are working fine. I've validated the code and there don't appear to be any bugs that could be breaking it. The browser is pulling in media query styles from the parent style.css file still - is there a standard way of overriding the parent media queries?

Thanks

saleemasad
saleemasad
12,126 Points

I'm having the same issues right now. Everything else seems to work fine in my child theme except for the media query. This is the code I that looks like it should work for me but doesn't. @media (min-width: 768px) .col-sm-6 {width: 33% !important;}

I'm stuck as well.

4 Answers

saleemasad
saleemasad
12,126 Points

Ok I just found the solution to my problem. I was missing another set of brackets Claire this might be your issue as well.

With me I had @media (min-width: 768px) .col-sm-6 {width: 33% !important;}

Instead I needed to wrap the query with brackets like so...

@media (min-width: 768px) { <------added this .col-sm-6 {width: 33% !important;} } <----added this

Then I moved it to the top of my child theme list to ensure there wasn't any syntax errors preventing the code to run. Also added the !important rule to ensure it overrides the parent theme.

How does that compare with your issue?

I don't think this is the problem for me, my code seems to be written correctly. This is what I have...

@media (max-width: 643px) {



#home-header .home-slider {
    max-width: 100% !important;
    margin: auto !important;
}

#home-header .metaslider {
max-width: 90% !important;
margin: auto !important;
}




.circle {
display: block !important;
margin: 0 auto 30px !important;
}


#circle-3 {
    margin-right: auto !important;
}

#use .logo {
    display: none !important;
}

#use .buy-now {
    float: none !important;
    margin: 0 auto !important; 
}

}

I have copied the media query selection (@media (max-width: 643px)) to match how it it written in the parent theme but it is still not recognised. Can anyone help?

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Do you have a link to this online somewhere we could troubleshoot?

NoI'm afraid it's not live yet. I'm just used '!important' on every media query attribute which has worked - I'm assuming this is the only way to override them?

Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Tricky to say without having something to test, sorry!