Problems with css random quote =)

Hi! im almost ready with the random quote project, but when i pass it to code pen and firefox, all the layout goes up… but in chrome looks just good. Here is the code pen, if someone knows how to fix it.

https://codepen.io/s1d4rt4/pen/YQYRVR?editors=0100

thx

you are including the script.js file that does not exist in codepen , codepen is trying to load the script.js file and it does not exit and respond with the error, so remove that and it works.
i also recommend not to include meta tags, link tags, script tag in html section, include it in setting of the codepen

1 Like

i deleted those, but the problem is still there. any idea on hoy to fix this? thx

i had checked in all browser , it works perfectly for me.
i recommend to check for error in console

1 Like

weird, for me the only browser in that it looks good is chrome, firefox and codepen looks like that. The console is ok too

the same for me , firefox and chrome look the same in this project.

thats weird, then why looks like that in codepen?

in chrome looks fine, like this:

and in firefox and codepen, like this:

:thinking:

Chrome and Firefox have different defaults for rendering html tags. Therefore, there will be times that the same page appears differently on the two browsers. There’s an easy fix, however. Go to this link and copy the CSS code into your CSS file: http://meyerweb.com/eric/tools/css/reset/

The CSS code in that link will reset all those defaults so your code will look the same on any browser.

i dont understend, if i copy that css or the normalize it just reset to default, that means i have to rewrite my css? I watched some videos and it seems i have to work from that point a new… if i copy that css my random quote just look uglier.

by the way, it seems that the css that is not working are the width and height in percents

I appreciate your answers, but the problem was actually in the height property, instead of using px or %, i just had to change the unit to vh (viewport height).

here is the explanation on how it works:

and here is the the pen working as proof:
random quote generator

again it was a realy simple solution that took me 2 days to find :joy: