Change:
color: var(--secondary-color); } <del> .fcc-modal .close { color: var(--secondary-color); opacity: 100%; </del> <ins> button.close { color: inherit; background-color: transparent; </ins> font-size: 28px; <ins> opacity: 0.5; </ins> text-shadow: none; } <ins> button.close:hover, button.close:focus { color: inherit; opacity: 1; background-color: transparent; } </ins> .modal-content { background-color: var(--secondary-background); border-radius: 0px;

Discussion:
When in a challenge, any of modals that popup (completion, ask for help, etc..), have a little close button at the top right that has recently become very hard to see... !
Also, when you hover over it, it gets obscured by the hover effect: !
Seems like there's an opacity issue... <img width="698" alt="Screen Shot 2019-11-26 at 8 11 42 AM" src="https://user-"Removing that 1% opacity makes it look like it did before, but I can't pinpoint where it's coming from in the code.
Production or local?
The hover effect is visible in production and they are also a little hard to see.
please investigate.
table for reference...
Thanks for the confirmation. The latest master is now (as of this comment) live on .dev, if you want to confirm this issue is fixed. If yes, I will proceed with the deployment to .org
I have pushed further to production and can confirm that the issue is reproducible on both staging and production applications.
I have bumped this to crit path.

Please see below. The text has been shifted around a bit in some aspect ratios. We need to ensure that the text on certifications looks right on all screen sizes: <img width="1149" alt="5freeCodeCamporgonTwitterWearetakingfreeCodeCampdownsowecandeploysomemajorchangesWewillbebacksoonInthemeantimeourYouTubeisupandithas1000codingtutorialsonPythonSQLDataScience_andMachine_Lea" src="https://user-"
Can I get steps to reproduce? I can't see this on my dev build with any screen size.
I can't reproduce this either. Although on one load of the above cert, I did get the date with a dark font color... <img width="877" alt="Screen Shot 2019-10-18 at 7 20 31 AM" src="https://user-"But I couldn't reproduce this a second time. Seems like maybe some of the intended css isn't getting applied intermittently or something.
hmm. it seems like a theme related issue. all colors in the certificate should come from :root {} in the
Since we're dealing with formatting and whitespace of certificates here, should we not center this to the page? !
Is it not already centered I'm not sure what you are referring to. So I think I figured out how to reproduce my issue. The date gets the dark font when you open a cert in a new tab or go to the URL through the address bar. But gets the correct font when you just open the cert in the current tab from the portfolio page. Can anyone else check this?
I’m referring to vertical centring. See the white gap between the end of the certificate and where the browser ends
I put in a pull request to center the certificates vertically on large screens. I can't reproduce your font color issue. New tab and navigating with URL both show the correct font color for me. I also can't reproduce the font offset in the first screenshot. So I don't think there is anything else that can be done on this issue unless someone can reproduce these.
I am not very sure as well, could be some specific device or viewport size. Will check with the OP to test this. Thanks for the PR.

The problems that pointed out: were not addressed in , so this should not have been closed.
Can anyone else reproduce that? or Quincy's issue? I can still reproduce mine on production, but not locally. Perhaps it has worked itself out on master.
I will have a build pushed to dev within the hour. Would you like your user record there for testing?
Sure
Okay let's do a before and after, I am have your user record to .dev, and will let you know again on this thread when I have pushed a build.
I can reproduce it on production. I haven't had chance to do locally, but my guess is you'll need to build the client to see it.
The changes have now landed in production as well. Can you check?
it's something to do with client-only routes. If you build the client and then use to serve it, you see the problem Tom found. For some reason you get a 404 for the cert route and it loads, but the gets and so the certificate renders incorrectly. Everything works as expected when using .
Hello - This may help debug the issue. I do not have this issue when viewing the certificate from my profile page - after clicking the "View Full Stack Certification" button. <img width="1377" alt="Screen Shot 2019-11-21 at 9 27 44 AM" src="https://user-"I do have this issue when viewing the certificate while visiting the url directly. <img width="1372" alt="Screen Shot 2019-11-21 at 9 31 17 AM" src="https://user-"
i think some general theme based color styles are over writing that element styles, in this case if this case if we make the styles more specific, and apply to it should work. !
It's not just the fonts. The page sizing is also getting messed up when visiting from an external link. If you come from somewhere other than fCC, you'll see scrollbars.
I could not reproduce this on mac and chrome 78.0.3904.108. could you give tell me about the browser and operating system you are using.
See scrollbar to the right when I open it externally ! None if opened directly from fCC ! Also, notice whitespace is different
Alright, since we've the donation request, this issue has been rendered moot