CSS stopped working when I upgraded the theme

Hi, I am working with wordpress with the divi theme. I wanted the header to be a certain height, and the text to be centered vertically. I went with this CSS:
/*-----------------------------------------------*/ 
/*-----Header & Slider Alignment by Divi Soup----*/ 
/*-----------------------------------------------*/
/*Fullwidth Header*/
.ds-fw-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end ;
    -ms-flex-align: end;
    align-items: center/* flex-start | center */;
    padding: 0;
    min-height: 60vh; /*Adjust for header height*/
    height: 60vh; /*Adjust for header height*/
}
.ds-fw-header .et_pb_fullwidth_header_container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.ds-fw-header .header-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 2% !important;
    margin: 0;
}

/*-----------------------------------------------*/ 
/*-----END Header & Slider Alignment by Divi Soup----*/ 
/*-----------------------------------------------*/

Open in new window


And it worked perfectly.  But then I upgraded to the latest Divi, and of course now it's broken. Can anyone help me make the header 60vh again? Site is https://techgardens.com/optical-engineering/

Thanks.
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
It seems that there may be a parsing error in "/optical-engineering/wp-content/cache/et/global/et-divi-customizer-global-15369751308298.min.css" which is causing browsers to ignore those rules.

I suggest you use the validator to check the non-minified version of that stylesheet.
0
mel200Author Commented:
ok, thanks. I could also go in and add it to each module, that did work when I tried it on one.
0
Julian HansenCommented:
It looks like the styles are still good if you add them to your existing page.

1. Save above css to a file
2. Open site in Firefox
3. Go to the Style Editor tab
4. In left sidebar click the style upload button (rectangle with an up arrow) and load the file from 1

Does this give you the results you want?

If so - we just need to figure out why your CSS is not loading in the updated theme.

Where did you place the CSS in your theme before the upgrade?
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

mel200Author Commented:
Hi- Darn, I keep uninstalling Firefox because for some reason it slows my system down. Divi theme has a section to add custom css under theme options. It would be simple enough to remove the code from there and put it directly into each header, I only have 15 or so. I might do that for expediency.
0
mel200Author Commented:
I thought it was loading the other CSS from that bit of code,but I was wrong. I think I'll have to load the whole code into each header individually.
0
mel200Author Commented:
I think the problem was that I added a class to each header, ds-fw-header, and it wasn't accepting or showing that class.
0
Julian HansenCommented:
The page as you render it is fine - the ds-fw-header class exists - and if you load the style sheet it applies.

The problem seems to be that the styles are not being rendered.

Not sure what you mean by adding them to each header - as far as I can tell these should be global styles?
1
mel200Author Commented:
Hi- I went ahead and removed the CSS from the css options section of the theme and added it to the CSS section of each header module, after removing the class. That worked, so I think I'll go from there. Thanks - another question coming up in an hour, so keep your eyes out for that! Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.