Need some help with my tribute page

Hi! I recently started doing freeCodeCamp and I love it! I’m almost done with my first web page but I need some help. Here’s the CodePen link to my site:
The problem is that when you are viewing the site from your phone, the ending quotation mark at the bottom of the page ends up at a weird position. Here’s how it looks like:

I’m almost certain that it has to do with ‘position: absolute;’ in ‘q:after’. The problem is, if I don’t use ‘position: absolute;’ for the quotation marks, they mess up the quote, unless I’m using the default quotation mark size, which I don’t want to in this case. How can I solve this problem?


position absolute is related to the first parent that has its position explicitly defined. If no parent has its position defined, position absolute is related to the body element.

In your example I couldn’t figure it out what that first parent is, but if you add “position: relative” to the blockquote that will do the trick. From there you have to align the quotation marks again (remember you can use negative values if needed).

Hope it helps.

Thank you for responding! I tried using positon: relative before but I ended up with this:

Even on desktop, I can’t get it right if I use the relative position because for some odd reason, it creates a big empty space before the last line of the quote.

Sorry, I probably wasn’t clear enough:
q:after should have position absolute.
It’s parent (the blockquote tag) is what should have the relative positioning.

1 Like

It works perfectly now. Thank you so much!