I can’t get my random quotes to be displayed and I am not sure what I’m doing wrong. Can anyone let me know what the error here is? Thanks!
Here is a link to my codepen:
1 Like
First of all I really like your design.
Good news is: I can see the quotes.
Bad news: I can’t tweet them.
Looks like you got the quotes api and the twitter function to work. I also like the design!
If you don’t mind, here’s some suggestions I have.
-
Try to keep your code DRY(do not repeat yourself). Your font-family style can be applied to the body tag and everything child under your body tag will inherit that style.
body {
font-family: ‘Scope One’, serif;
}
.author-text {
/* Just an example of style inheritance.
This text-align style can be removed because it inherits
this property from it’s parent div’s .text-center class. /
/ text-align: center */
} -
Try removing the br tags tags and using margin-top or margin-bottom to space things out. You can also try messing around with padding too. Experimentation is key here.
-
Just a stylistic preference here. You could perhaps try making the box shadow for the .quote-area more subtle by reducing how far away it is and changing it’s color to one with less transparency.
Example:
box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
Anyways, great work Jenny. Keep it up!
Thank you for some reason, it won’t display properly on my browser (the box containing the box is just blank) but I am able to see on my mobile browser. Any ideas why?
I see what you mean. In the codepen preview box, the quotes don’t show up. After inspecting the chrome developer tools, I believe I found the answer.
The codepen box is being served on https, which apparently does not allow get requests from http links. On the other hand, the codepen page itself is being served on http, so we don’t experience that issue on the actual codepen page.
Not sure how to fix this issue. Maybe try changing the link in your post to use http instead of https? I did exactly this in my chrome developer tools and it worked for me. I hope this helps.
Changing the link to http instead of https.
