Problems positioning an element and the text inside of it

#1

Hi everyone, I’m working on my tribute page and I’m really struggling in getting it done. So, I’m trying to include a quote but there are many things going wrong when I try to make it and I just don’t know how to address the problem.

  1. I don’t know how to make my #quote-container element go down (which is colored blue only because I wanted to see visually where it was) for some reason the circle image I have on top of it is slightly overlapping it.
  2. The text inside the element doesn’t seem to be centered inside the element even if I instructed it to do it (I think…I’m not even sure if I nested it properly).
  3. The text inside of it is writing over itself when I resize de browser.

I’m thinking the reason is because my nesting is done all wrong, but I’m not sure. I don’t know how to tackle this or where to start.
Any help would be greatly appreciated.
Thank you!

#2

I assume you defined the im2 class as the following to move it down from the div with class=“atlas-image”. By using top: 60px; (shown below) it is shifted down into the blue div. If you want to keep top:60px; then you could add a margin-top: 60px; to the #quote-container definition.

.img2 { 
  border-radius: 50%; 
  position: relative;
  top: 60px;  
}

The text is shifted over 10px to the right, because you defined p elements with left: 10px;

That is because you defined p elements with line-height: 0;

1 Like
#3

Wow! Everything you suggested worked perfectly. I really appreciate you taking the time for helping me with this. Thank you.

#4

I am glad everything worked for you.