Kevin Powell - Community•2mo ago

help me with this messed up layout

Stil busy with the recipe page but the more I try the more It seems I make a mess of it. Can anyone help me with these points : - the css on the li causes that the ordered list has also now a bullet instead of numbers. - how can I move the bullet - how can I make it work that the text "minutes" is under de text and not under the bullet point Live version : https://roelofwobben.github.io/recipe_page/ IM still working on the mobile version

19 Replies

Mannix•2mo ago

do not nuke the padding and margin on the * selector your lists are broken that way 😉 also i don't see text minutes under the bullet it goes as you want under the text

roelofOP•2mo ago

Chips, some other css has also messed up the margins I set on that part 😢 And another chips. The rebuild has failed

curiousmissfox•2mo ago

Do you have a link to the code ? For the bullets it sounds like you either used an <ol> instead of <li> , or you changed the css for the list-style or ::marker .
What do you mean by "move the bullet" ? If this is the same peojecr as I remember , Chris has shared a lot of information including how ro align the bullet vertically to the middle of the <li>. And that solution will also help with aligning any wrapping text ("minutes").

roelofOP•2mo ago

@curiousmissfox here is all my code : https://github.com/RoelofWobben/recipe_page

GitHub

GitHub - RoelofWobben/recipe_page

Contribute to RoelofWobben/recipe_page development by creating an account on GitHub.

Chris Bolson•2mo ago

the css on the li causes that the ordered list has also now a bullet instead of numbers.

You need to restrict the scope of those custom bullet points so that it only affects the prep list, eg.

 <ul class="prep">
   <li><strong>Total</strong> Approximately 10 minutes</li>
   <li><strong>Preparation</strong> 5 minutes</li>
   <li><strong>Cooking</strong> 5 minutes</li>
</ul>

 <ul class="prep">
   <li><strong>Total</strong> Approximately 10 minutes</li>
   <li><strong>Preparation</strong> 5 minutes</li>
   <li><strong>Cooking</strong> 5 minutes</li>
</ul>

ul.prep > li {
  list-style-type: none;
  margin-bottom: 1em;
  font-family: Outfit; 
  color: var(--stone_600);  
}
ul.prep > li:before  {
  content:"• ";
  margin-right: 1em;
}
ul.prep strong:after {
  content: ':'; 
}

ul.prep > li {
  list-style-type: none;
  margin-bottom: 1em;
  font-family: Outfit; 
  color: var(--stone_600);  
}
ul.prep > li:before  {
  content:"• ";
  margin-right: 1em;
}
ul.prep strong:after {
  content: ':'; 
}

Mannix•2mo ago

also don't use ::before use ::marker

Chris Bolson•2mo ago

Can you vetically center a marker? (cross-browser)

roelofOP•2mo ago

oke, so do not use the sections anymore to make the right css for the elements in it

Chris Bolson•2mo ago

my suggestion has nothing to do with the sections. I just suggested adding a class to the parent <ul> element

roelofOP•2mo ago

never heard of the ::marker thing

Mannix•2mo ago

cross-browser not sure but they should be in the middle but if you need more options then use ::before

roelofOP•2mo ago

@Chris Bolson and maybe add a div to make the margins one time instead of for every part ?

Mannix•2mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

MDN Web Docs

::marker - CSS | MDN

The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.

Chris Bolson•2mo ago

::marker is for styling elements such as the bullet points. However I believe that it isn't currently not possible to center it vertically within the height each li element, that is why I suggested using a psuedo element.

Mannix•2mo ago

right now you selecting all the li on your page you need to be more specific something like ul li as selector should be enough since they look the same to me in both places

roelofOP•2mo ago

oke, so delete a lot of css I made today and again start over again and hopefully I can end this "simple" one

Mannix•2mo ago

nah just narrow it down

Chris Bolson•2mo ago

You don't need to delete a lot of CSS, you just need to add the class to the parent and update your custom bullet points to restrict them to that element - it should take about 30 seconds. Yes. Mannix is right. For this particular design, simply using ul li would be sufficient. This assumes that both ul lists have bullet points that should be styled and react (ie be vertically centered) in both of the lists. Just to help you understand why this works, by defining specifically the ul li, the styling is limited to li elements that are children of any ul parent. Any li elements that are children of any ol will NOT get the styling.

roelofOP•2mo ago

that would be easier to change and in the :before can I center the bullet with just flex ?? @Chris Bolson

Gaming

Programming

help me with this messed up layout

Did you find this page helpful?