Random quote machine2

Code Feedback
1

Please review!!

2

Nice!

One way you could make it even better is to set all the animations to the same duration and prevent them from queueing, so everything would change color at the same time.

http://api.jquery.com/animate/

1 Like
3

thanks! how to center the heading and bring the new quote button to right

4

To center the heading, put it inside a div with one of the bootstrap column classes (e.g., col-12). Right now it’s in a container that has display set to flex (from the row class), which means its width isn’t 100% of the width of its container.

1 Like
5

thanks… anything about ‘New quote’ button

6

Parent in which you want to position it to the right:

position: relative;

Element itself:

position: absolute;
right: 0; /* Change this based on how far you want it from the
edge of the containing element. It seems like in your case the
padding on the containing elements already gives it just the 
right amount of distance. */

I also just noticed you specify the font as Ubuntu, but for some reason setting that as the font for body has no effect. I guess it’s because Bootstrap already has font settings for individual elements which take precedence as they’re at a finer-grained level. You can use the * selector instead of body to fix this. On a similar note, it’s odd that you’ve chosen Times New Roman and serif as your fallback fonts, given that Ubuntu is sans-serif. Is this intentional?

1 Like
7

thanks! for the suggestions on selector and positioning. i just wanted ubuntu font so i searched and pasted the whole font thing. didn’t know

8

when the quote is shorter than one line, author

Capture.PNG774×315 9.22 KB
is coming above the quote how to fix that

9

The fact they’re both in a single Bootstrap .row is causing their width to shrink if the content doesn’t fill the entire line.

1 Like