Differences between a parent theme and a child theme with identical CSS.
I have two websites that are the same except one is the parent theme and the other is a child theme. On the child theme everything is much smaller. For example on the parent theme I have two videos which I have set at for each row at 25%, 50.1% and 25% however on the child theme in order for them to appear the same size, I had to set the rows at 15%, 70% and 15%. Is this normal? You can view the two websites at https://mitziessidehustle.com/make-money/ the parent theme and
https://charlottestr.com/make-money/ the child theme. Also the logo on the parent theme is left justified and the logo on the child theme isn't left justified. How can I make the child theme act as the parent theme?
ASKER
No changes were made to the parent theme. So why the difference
in the child theme?
in the child theme?
Hey Mitzie,
It's not just the theme's css that can effect the look of your site. WordPress has lots of customisation options that are scattered around all over the place. The difference could come from an internal setting, or the Customizer, or even an additional plugin.
The main difference I see are the classes that are assigned to your body: On your parent site, you have these :
On your child site, you have these :
Knowing how CSS cascades down, these classes effect a lot of things on your site. Take your logo for example - the reason they look different is because the wrapper div has this style applied on the child:
For your site to match exactly, you'd need to make sure all the settings matched exactly as well, which isn't as easy as it sounds. Have a look in the Customizer for starters. Look for something specific to Site Layout or possible even Template (Default / Full Width / Canvas etc).
It's not just the theme's css that can effect the look of your site. WordPress has lots of customisation options that are scattered around all over the place. The difference could come from an internal setting, or the Customizer, or even an additional plugin.
The main difference I see are the classes that are assigned to your body: On your parent site, you have these :
page-template-default page page-id-229 siteorigin-panels responsive layout-full has-sidebar page-layout-full-width mobilenav elementor-default elementor-kit-
On your child site, you have these :
page-template page-template-home-panels page-template-home-panels-
Knowing how CSS cascades down, these classes effect a lot of things on your site. Take your logo for example - the reason they look different is because the wrapper div has this style applied on the child:
body.responsive.layout-full #page-wrapper .full-container {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}For your site to match exactly, you'd need to make sure all the settings matched exactly as well, which isn't as easy as it sounds. Have a look in the Customizer for starters. Look for something specific to Site Layout or possible even Template (Default / Full Width / Canvas etc).
ASKER
What element are you looking at to see body.responsive.layout-full #page-wrapper .full-container?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Check your css file in the main theme or any custom admin updates.