Kevin Powell - Community•3mo ago

How to make the text in the list good and the bullet point on the right place

Hello, Still struggeling with the recipe page So far I have this : https://roelofwobben.github.io/recipe_page/ but the text on the list does still not good and I cannot move the bullet point to the right place like this :

47 Replies

roelofOP•3mo ago

Anyone who can me some hints to achieve this ?

Aek.•3mo ago

look up padding

Chris Bolson•3mo ago

In this case I would suggest absolute positioning for this as the bullet needs to be at 50% height of the container.

roelofOP•3mo ago

oke so the li:before absolute and then the li relative ? @Chris Bolson

Chris Bolson•3mo ago

yes

roelofOP•3mo ago

Thanks, I will try it soon

MarkBoots•3mo ago

without abs position

ul {
  li {
    display: flex;
    outline: 1px solid;
    &::before {
      content: "";
      display: list-item;
      align-self: center;
    }
  }
}

ul {
  li {
    display: flex;
    outline: 1px solid;
    &::before {
      content: "";
      display: list-item;
      align-self: center;
    }
  }
}

roelofOP•3mo ago

@MarkBoots thanks but still the word "minutes" is under de bullet and not under the other text

MarkBoots•3mo ago

i would need to see the code then. your page is not updated to what i suggested.

roelofOP•3mo ago

moment im busy with updating the github repo

MarkBoots•3mo ago

you can also make a codepen demo

MarkBoots•3mo ago

oh, i do see you have a strong element. so multiple elements within the li. so with flex it wont flow nicely. in that scenario. i would suggest wrapping all text in a span

roelofOP•3mo ago

page is updated with your code ?? I needed that because some parts needed to be bold just as there is a big space between the bullet point and the text

MarkBoots•3mo ago

o, you removed all margins and paddings, ok. well you can add the spacing with a margin-right on the :before and use list-style-position: inline. and for the text content (including strong) wrap everything inside the li into a span. maybe now it is easier to use abs position

13eck•3mo ago

Umm, I think I found the issue:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

ul {
  li {
    display: flex;
    &::before {
      content: "";
      display: list-item;
      align-self: center;
    
    }
  }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

ul {
  li {
    display: flex;
    &::before {
      content: "";
      display: list-item;
      align-self: center;
    
    }
  }
}

You're nuking the padding on all elements, which is what list items rely on to properly place the markers. Then you're making your lis a flex container, for some reason. And then adding in an empty ::before that's taking up space.

MarkBoots•3mo ago

i suggested the flex for the vertical position of the marker tbh (not realizing there were more elements like strong in the li)

13eck•3mo ago

Slightly also, you should set max-width: 100%; on your img tag and not width: 100%; That way if the container width is larger than your image you won't get it streatched/pixelated. Honestly most of the issues can be fixed by removing the margin/padding nuke on the * selector. I really have no idea why that's "the thing to do". It's so dumb and causes more issues than it solves

Chris Bolson•3mo ago

This is how I would have done it (bearing in mind the content of the li elements):

.prep li{
  list-style: none;
  position: relative;
  &::before{
    content: '•';
    position: absolute;
    font-size: 1.5rem;
    left:-1rem; /* adjust to suit design */
    top: 50%;
    translate: 0 -50%;
  }
}

.prep li{
  list-style: none;
  position: relative;
  &::before{
    content: '•';
    position: absolute;
    font-size: 1.5rem;
    left:-1rem; /* adjust to suit design */
    top: 50%;
    translate: 0 -50%;
  }
}

MarkBoots•3mo ago

yea thats the way in this scenario

13eck•3mo ago

With just turning off a few things (copy/paste from the website CSS):

* {
    box-sizing: border-box;
    /* margin: 0; */
    /* padding: 0; */
}

ul {
  li {
    /* display: flex; */
    
    &::before {
      /* content: ""; */
      /* display: list-item; */
      /* align-self: center; */
    }
  }
}

* {
    box-sizing: border-box;
    /* margin: 0; */
    /* padding: 0; */
}

ul {
  li {
    /* display: flex; */
    
    &::before {
      /* content: ""; */
      /* display: list-item; */
      /* align-self: center; */
    }
  }
}

And I get this:

13eck•3mo ago

Though I do question this:

strong:after {
  content: ':'; 
}

strong:after {
  content: ':'; 
}

Do you not use the strong tag elsewhere? Do you need to save a few keystrokes while typing to hard-code the :?

roelofOP•3mo ago

yep, and I need this on mobile :

13eck•3mo ago

The bullet in the middle of the text? Why?

roelofOP•3mo ago

no idea. that is what the design wanted

13eck•3mo ago

Personally I'd push back and ask why. That's not how bullet lists work and to me it looks, well, painful. Then again, I bet your design person likes center-aligned text. Which is also painful to look at but for different reasons

MarkBoots•3mo ago

its a frontend mentor

roelofOP•3mo ago

yep. it is a front-end mentor challenge for "beginners"

13eck•3mo ago

It's a frontend mentor challenge? Challenging you to learn bad habits? Uhh… 😒 Well, if they're looking for that I guess I can't help any more. Best of luck ✌️

roelofOP•3mo ago

thanks @MarkBoots can I change the font-family and the gap between the text and the bullet like this :

ul {
  li {
    display: flex;
    font-family: Outfit; 
    &::before {
      content: "";
      display: list-item;
      align-self: center;
      margin-right: 1.5em; 
   }
  }
}

ul {
  li {
    display: flex;
    font-family: Outfit; 
    &::before {
      content: "";
      display: list-item;
      align-self: center;
      margin-right: 1.5em; 
   }
  }
}

roelofOP•3mo ago

this is very near what I want :

roelofOP•3mo ago

ul {
  li {
    display: flex;
    font-family: Outfit; 
    &::before {
      content: "* ";
      align-self: center;
      margin-right: 1.5em; 
   }
  }
}

ul {
  li {
    display: flex;
    font-family: Outfit; 
    &::before {
      content: "* ";
      align-self: center;
      margin-right: 1.5em; 
   }
  }
}

the only thing im missing now is some spacing around the ":"

MarkBoots•3mo ago

yea, but because you can use gap to space, as it is a flex box

roelofOP•3mo ago

where do I need to use gap here ?

MarkBoots•3mo ago

on the li

roelofOP•3mo ago

Thanks

roelofOP•3mo ago

I have now this :

roelofOP•3mo ago

and that looks more and more like what I ask for :

roelofOP•3mo ago

MarkBoots•3mo ago

yea, but you dont need flex. the flex will shove everything next to eachoter. or you have to wrap the and text all in a span <li>Total Approximately 10 minutes</li> that is what i said before. maybe abs position is better

roelofOP•3mo ago

oke very thanks this was bugging me for weeks

MarkBoots•3mo ago

its to bad we can not control the vertical position of the default marker.

roelofOP•3mo ago

that is FE , we cannot control everything Chips, found another problem with your code The div seems to have some margin or padding where it not schould have the whole div is too small now for the width

MarkBoots•3mo ago

you have a article div { } rule. that is cascading to divs in divs article > div { }

roelofOP•3mo ago

found it padding on the div was too high

MarkBoots•3mo ago

but i would suggest not removing the margin and padding at the root. as what Beck noticed before. I know it is a quick reset. but doing that makes you put everything back again It's easier to adjust when needed

roelofOP•3mo ago

oke Thanks still some work to do

MarkBoots•3mo ago

good luck

Gaming

Programming

How to make the text in the list good and the bullet point on the right place

Did you find this page helpful?