003-list-items-misalignment

I noticed there’s some misalignment between bullet points and list items as well as shorter header in mobile view. My understanding this is because the last list, the 3rd one, contains longer words in the header and the list items.

http://test.prygara.com/about/

Does it worth it to tweak it further to try align somehow or leave it as is?

1 Like

Maybe this is a text alignment issue. You have to set all text in the same direction or you haven’t added a float tag in your container. However, you could share your CSS code so that I can help you more.

I won’t be at my desktop until later today but if I remember correctly those were independent blocks which are centred individually so may not align perfectly.

I’ll have a look at the code later and see what can be done :slight_smile:

Paul is correct. the encompassing div is centered, and then the underlying h2 and div have different widths, causing them to not align with each other.
Could be fixed by enforcing a width on .card’s direct children, but probably not the best solution for smaller screens.

For the benefit of Paul if he’s not back at his PC:

div.card
   h2
   div.text
      ul
         li (x3)
Repeat structure 3 times.

.card has a display: flex; flex-flow: column; justify-content: center; align-items: center;. The width of everything under .card is soft. The entire site is wrapped in a div with a text-align: center; rule.

2 Likes

That may be the easiest solution without changing the whole structure again. If we give a smaller width and align everything left it shoulkd be ok as long as the words don’t change into something longer at a later date.

e,g,


@media screen and (max-width:500px){
    
    .cards .card > * {
        width:120px;
        text-align:left;
    }
    
}

That will align the left edge of the text but let the bullets line up outside. Its not perfect but should be good enough :wink:

2 Likes

It looks much better now. Thanks @m_hutley @PaulOB

2 Likes

you are right