Child Styles Not Working After Update

I just updated the parent Woodmart theme to 5.3.6 and now our child styles of .container are not working, as they were before the update.

The container in the child theme has a max-width of 1540px, but it’s being overwritten by the parent theme container with a max-width of 1222px.

Attachments:

You must be logged in to view attached files.

Hello,

Please restore your site from the backup and provide the site admin access. I will check and try to update.

Best Regards

We cannot restore from backup as we have new orders since then. We can create you a user profile. What email of yours do we use?

Hello,

Please create a staging site and restore the backup there we shall compare and restore accurately on your live site.

Best Regards

I cannot restore a previous backup to a staging that was just created. I can only push the current website to staging.

Hello,

Please clone the current site to the staging platform. For the future, always make the full backup before updating.

Best Regards

Okay a backup has been created: staging8.pmctool.com

Hello,

Please provide the credentials to the private area.

Best Regards

Credentials below

Hello,

Sorry, you have provided the wrong credentials I cannot login. Now the version 6.0.3 has been released.

Please provide the correct access.

Best Regards

I was able to just log in with that username and password at staging8.pmctool.com and it worked

Hello,

Do you mean the changes you have made as per the suggestions give here: https://xtemos.com/forums/topic/move-and-rename-size-guide/

Please follow the steps, the classes have been changed in the recent version.

If you still need help let us know.

Best Regards

No, I am referring to this thread about how we updated the Woodmart parent theme and now our css styles in the child theme are being taken over by the parent theme.

As stated previously “The container in the child theme has a max-width of 1540px, but it’s being overwritten by the parent theme container with a max-width of 1222px.”

Hi,

Try to replace the previous custom code with the following one:

body .container {
	max-width: 1540px;
}

Also, you can change initial container width: 1222px via option in Theme Settings => General layout => Custom width in pixels (https://gyazo.com/546694b21dc5cb2d9497291f69c1f290) without any additional customizations.

Kind Regards

Yes, that code works as a workaround thank you, but it does not solve the issue of the child styles not overriding the parent like they should. They were overriding before the update. Now we are having to go back through and add “body” in front of numerous styles to get our css to work like it was.

Hi,

As indicated in Woodmart 6.0 change log, in our latest theme update we added automatic CSS generator which load parts of CSS styles only for elements which is placed on page. Since in that case some styles are loaded dynamically, they are loading after child theme styles. Having custom CSS code selectors with same specificity as theme selectors make styles placed below advantage over others.

To remove style order advantage custom CSS code selector need to have a higher specificity. In that case body tag at the beginning will be enough. More about CSS specificity can be found here (https://css-tricks.com/specifics-on-css-specificity/).

If you don’t want to use automatic CSS generator, you can turn it off by enabling “Combine CSS files” option in Theme Setting => Performance => CSS (http://prntscr.com/12ve3w2)

Kind Regards

All of our html blocks are not showing properly now and now just say [html_block id="1234"]. Also all of the text and everything is much bigger. It completely undid styles I already had set. And the homepage slider has completely disappeared.

Please check if Woodmart Core plugin is installed and activated. If it is activated, but issues still exist, provide us your admin access, so we can log in and check this on your side.

Thank you in advance.

[Author]

Posts