Tribute page bullet issue

HTML-CSS
1

Tell us what’s happening:
My tribute page is done and seem perfectly fine in normal display, but when i try to resize my browser to the smallest, the bullet will go out of the div, i tried list-style-position: inside but it did not achieve my intended result as the text go beneath the bullet, my ultimate goal was to achieve exactly like the sample page.

What happening now:
04%20PM

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36 .

Link to the challenge:

2

Hi,

I just tried by using the property list-style-position: inside for #tribute-info li and it is working fine.

#tribute-info li {
  padding: 10px 10px;
  line-height: 25px;
  list-style-position: inside;
}
3

but the text go beneath the bullet, my intended result is the text start from the blue line instead of red line (refer image)

07%20PM

4

Okay, what I did now is I removed the property list-style-position:inside from tribute-info li tried changing the padding value to 30px under #tribute-info ul. This resolved the issue.

#tribute-info ul{
  **padding: 30px;**
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
  border: 1px solid;
}

#tribute-info li {
  padding: 10px 10px;
  line-height: 25px;
}
1 Like
5

it’s worked! much appreciated

6

I’m glad it worked. Happy to help!:slightly_smiling_face: