Recipe page solução, com flex, variáveis e design mobile
Design comparison
Solution retrospective
Neste código eu usei variáveis para estilização, usei rem para almentar a responsividade e criei um estilo exclusivo para mobile
What challenges did you encounter, and how did you overcome them?Tive uma pequena dificuldade de trabalhar com rem no início, mas depois eu descobri que se eu aplicar no CSS:
html { font-size: 62.5%; }
1rem passa a ser igual a 10px, então ficou mais fácil de trabalhar com ele.
What specific areas of your project would you like help with?Eu gostaria de saber se ao estilizar uma ul com list-style-type: disc;
tem como diminuir o tamanho da bolinha e se tem como alterar a fonte dos números em uma ol, eu tentei de várias maneiras, mas não consegui.
Community feedback
- @R3ygoskiPosted 5 months ago
Olá mais uma vez Isabela, e mais uma vez parabéns pela conclusão de mais um projeto, você está indo bem.
Sobre sua duvida, sim, tem como alterar o tamanho dos bullets (bolinha), e também tem como alterar a fonte dos numerais da lista ordenada, veja os exemplos a seguir, nele irei mostrar como aumentar o bullet e também como alterar o font-family.
Suponhamos que temos esse HTML:
<div> <ol> <li>A</li> <li>B</li> </ol> </div>
O seu CSS ficaria assim:
div > ol > li::marker { color: red; /* Alterar a cor do bullet ou numeral */ font-size: 2rem; /* Alterar o tamanho do bullet ou numeral*/ font-family: 'Arial', sans-serif; /* Alterar a fonte do bullet ou numeral */ }
Edit: Você faz a alteração dos bullets/numerais da lista utilizando a pseudo-classe
::marker
na suali
.E uma dica, ao invés de utilizar o
list-style-type
como você fez, você poderia no seu reset, não ter colocado olist-style: none;
, que dessa forma, já viria os valores por padrão. E o valor padrão da<ul>
já são os bullets.E uma dica rápida, quanto ao seu HTML, você pegou o jeito de como utilizar as tags semânticas, está muito bem feito parabéns, e a dica é de que as
<div>
que representam cada seção do seu<article>
, poderiam ser<section>
.E de resto é isso, meus parabéns, você vem se aprimorando bastante e seu projeto está muito bem feito, continue assim. Caso tenha ficado alguma duvida, já sabe, só perguntar abaixo.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord