Two stylesheets acting on one element

Question

I am trying to style one element with max-width and I was having problems. I discovered that the child theme stylesheet was being augmented by the original stylesheet with width at the same time.

What gives? I could go in and remove the line from the parent theme but I worry about future-proofness?!?

Answer 1

When in doubt, !important it out!

In the child, change it to max-width:769px !important;. That will force the page to be rendered with that style.

I have a feeling the parent theme is using @import to get custom.css (although I cant verify that). That could be screwing with things.

Answer 2

I figured it out. I am using Gridly, which is responsive but I want to make it even more responsive. I created a child theme. When I added the header.php file to my child theme directory I only changed one line of the if_statement that determines what css file to call. In the child theme, I have to call a css file with get_stylesheet_directory_uri(); . I wanted to use the custom.css file and that was the only line of the if statement that I changed. There were three more stylesheets to choose from. To solve that, I went back into my child theme header.php and searched and replaced all get_template_directory_uri(); that call css files with get_stylesheet_directory_uri();.

Gridly theme doesn't use style.css the same way as most WordPress themes. There are no styles in the style.css, it merely exists. It is not a WordPress sanctioned theme that you can download from WordPress. I heard about it from Lynda.com. It calls stylesheets from an if_statement in the header and then links to specific stylesheets, i.e. dark.css, light.css, etc. I am not sure if this functionality is what keeps it out of the WordPress Theme directory, but it works and I like the simplicity and masonry effects.