Please help: Tribute page Elon Musk

Hello all,

Here my tribute page, I’d love to hear some feedback!

The responsiveness has been though which left me with one problem:
I am not able to make the text, which is(should be) on the first big image, responsive.
I want it to be on the same place on the image at any time but I can’t seem to find the solution.
Also the red line which contains the white text goes way to the right “off” the page.

Any help appreciated.

Original Codepen: https://codepen.io/jacobw/full/BzEoEO/
Quick fix Codepen: https://codepen.io/jacobw/full/RRmVrz/ (I screenshotted the text on the image and put that as the image instead.)

Thanks in advance,
Jacob

U have absolute + width 100% on element
#nameintro {

     position: absolute;
     width: 100%; 
     .....

Open dev tools, and play with unchecking this width
also u may want to increment top so the text ( p ) doesn’t stay onto other text ( h1 )…
Or u may want to set opacity to number lower then 1 to this p

1 Like