Hey freecodecampers, critique my Random quote generator

Here is the link to my codepen
This is not mobile friendly.

Ok, do you need help making it mobile friendly?
If it was a poster it would be excellent. Great design :sparkles:

Hell yeah, I would appreciate the help. Kinda new to flexbox

Even on desktop, I had to scroll down to reveal the “New Quote” button. Flexbox takes a fair amount of reading to get right. Keep at it, though. W3 schools has a nice tutorial on it.

Hiya @zootechdrum

I had a go at making it responsive by adding some media queries.
display flex should be on the container containing the elements you want to “flex” so I did this.
I also use vw = viewport width which is a percentage.

Ask me if you have any questions:

it looks great. One tiny issue. there is a small margin on the right size that is bright pink. its like it overflows a little .

Also why does the random function not work anymore?
That function is supposed to change my quote. However when you added the flex container it didn’t work.
Also, how did you get the twitter image to appear on your pen without having font awesome initialized?

this picture shows the margin on the right that appears.

I seem to have fixed the function issue. But not the rest of the issues as discussed above. For whatever reason my big image disappears now at smaller screen lengths. lol. Damn it
https://codepen.io/zootechdrum/pen/Zxdrvm

Okay I know how everything works now after I studied your pen. The only thing left to fixis the big pink margin coming from the right side. I wonder where that is coming from.

its coming from the bttn class. the width is affecting the right margin.

There is still a small little margin on the right after i made some adjustments. Not completely fixed but its a start.

Many of these problems can be solved using Bootstrap which the course teaches you. Good that you are trying to do it with vanilla CSS / JS so :clap: for that.
What you could do is play with it more or leave it for now and return when you have more skills & understanding. That is what I have done with my projects.
You are nearly there but if you comment out /* height: auto; */ on line 97 it looks better.
I can’t see the pink margin myself.
Also, careful when you do CSS resetting like this *{margin:0 auto}
If you want resetting go to the pen settings and choose an option there, for example, Normalize - see screenshot:

normalize