My child theme's style.css changes undo when screen width is below 1200px

Sparkling
1

Hi!

I have another question. I made changes to my website’s style.css using a child theme. I noticed though that when I resize the screen too below 1200px the child theme’s style.css changes are made undone, i.e. post background color, footer color and sidebar color, etc. When I rescale to above 1200px, the website goes back to the colors I put in the stylesheet.

Any idea why this is?

Thanks,
Thom

PS. Added an image too clearly show the issue.

2

Hi Thom,

I hope you are well today and thank you for your question.

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

Kind Regards,
Movin

3

Hi Movin,

Thanks for the quick response. Of course, the site’s URL is: http://nieuwtoezicht.nl/

Cheers,
Thom

4

I visited your shared site and found this is happening because of the following incorrect custom CSS code that you have added in your site child theme style.css file.

@media (min-width: 1200px) { /*Widget positie*/
	.col-lg-12 {
    width: 100%;
	margin-top: -20px;
}

#secondary .widget { /*Widget positie en kleur*/
  margin-bottom: 30px;
  color: #6B6B6B;
}

The correct code is as following where the opening curly brace of media query is closed.

@media (min-width: 1200px) { /*Widget positie*/
	.col-lg-12 {
    width: 100%;
	margin-top: -20px;
}

#secondary .widget { /*Widget positie en kleur*/
  margin-bottom: 30px;
  color: #6B6B6B;
}
}
5

Thanks a ton, that did the trick! Everything seems to be working now! :slight_smile:

6

You are most welcome here :slight_smile: