Conic Gradient Showing in CodePen but not in GitHub?

HTML-CSS
1

Hi folks,

I just transferred code for a conical gradient for my webpage header on CodePen to my twin webpage on GitHub. However, the conical gradient is not showing! I also have the correct scripts in the html header tags. What could be the problem? Thanks in advance for your help

CodePen link: https://codepen.io/IDCoder/full/LBeXKG/
GitHub link: https://mtzioncode.github.io/

See screenshots below:

Conical%20gradient%20issue%201
Conical%20gradient%20issue%2011684Ă—848 317 KB

Conical%20gradient%20issue%202
Conical%20gradient%20issue%2021560Ă—870 328 KB

2

Untitled
Also codepen does some weird stuff behind. I also had to “adjust” my code. Weirdly enough, after adjusting all little bugs showing on codepen disappeared in git pages … Your only solution(as i did) is to put browsers windows side by side with codepen and git pages and sift though incosistencies. PS: It’s better to check first in local with freshly cleaned browser cache and in several browsers and to be sure.

3

That error is for the javascript typewwriter function. And it just increases to 24 and more, because the function runs continuously. The error shows in CodePen too. I don’t think that should affect it…

That error reads as below (the function still runs though)

Uncaught TypeError: Cannot read property 'length' of undefined
    at StartTextAnimation
4

Did you tried “Analyze” html, css and js option in codepen? It shows numerous error in all three.

5

@codename11 , infact I just sifted through the errors ans saw this:

Conical%20gradient%20issue%203
Conical%20gradient%20issue%2031357Ă—645 172 KB

The javascript link conic-gradient.js is valid, so why is it saying: “This request has no response data available”?

6

Try to refresh while your network tab is open and you’ll get response. And you should try to use “analyze” in codepen. 2 This is just of many errors i saw. You have errors and warning in all three sections(html, css and js).

7

@codename11, I just took a look at some of those errors. I will try to fix them. I doubt they’ll solve the conic-gradient issue though. And yes, I had the network tab open, the conic-gradient.js has a 404 status… :tired_face::persevere:

8

I know you didn’t ask, but I might reconsider your design. I might consider something more sleek, elegant, and modern looking. This is much too busy. I feel like my eyeballs and my attention are being raped. This is the kind of page that I want to get off of as quickly as possible.

9

@kevinSmith, you kind of made me burst out laughing!:grin: Thanks for the feedback though. I will see what parts of the design I can re-consider. But while you’re here, do you know why the the the conic-gradient.js is giving a gradient status?

10

Sorry, I took a look but this is beyond my CSS skills.

1 Like
11

@codename11, I figured out the problem…first I copied and pasted the Google error from the developer’s console straight into Google’s search bar hahaha…I found out via an answer, that it could be a file path issue. So I checked my particular script tag src, and there it was! I was missing the complete damn web address! Woohoo! :grinning::grinning::grin::rofl:

But, also, thanks for telling me about the errors you found via using the analyze tools in CodePen, as I rarely use them! I corrected most of the errors in js and css…I’ll get back to the html stuff…