Skip to content
Submitted 7 months ago

Simple Card Component

mendesdomingosdev•110
@mendesdomingosdev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud that I didn't needed to much time to do it.

What challenges did you encounter, and how did you overcome them?

I'm not familiar with figma.

What specific areas of your project would you like help with?

How can I make the text break by himself instead using br tag?

Community feedback

  • Bernardo Poggioni•5,280
    @R3ygoskiPosted 7 months ago

    Olá @mendesdomingosdev parabéns pelo seu projeto, ele ficou muito bem feito e semelhante ao design proposto.

    Quanto a sua pergunta até onde eu saiba, não tem como você fazer uma quebra de linha via CSS. Mas tem formas que se assemelham, que vou falar logo abaixo.

    Usarei o seu projeto como exemplo:

    Sua tag <p> ficou assim:

    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to  the next level</p>

    o seletor .text ficou assim:

    .text {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

    Adicionei o align-items no .text para alinhar os textos ao centro.

    E o seu seletor p, ficou assim:

    p {
    color: hsl(220, 15%, 55%);
    font-size: 0.9375rem; /* 15px */
    letter-spacing: 0.188px;
    width: 270px;
}

    Quando o texto chegar ao limite do seu tamanho, isso é, 270px, ele irá quebrar e ficará semelhante a forma que está no design.

    Agora uma dica que notei é sobre você ter usado medida absoluta para o p que foi de 15px, é recomendável usar rem, pois essa medida se adapta as configurações de fonte do usuário.

    Em um dos seus comentários percebi que você teve dificuldade em entender sobre o width e o max-width, caso essa duvida já tenha sido sanada, então ignore o que vou falar a seguir: O max-width delimita o tamanho máximo que seu elemento pode chegar, se você colocar por exemplo max-width: 350px; o seu elemento não irá passar desse valor, mas ele pode ficar menor do que esse valor. já o width: 350px; seria um tamanho absoluto, isso é, ele não mudaria de tamanho de forma alguma, é 350px e pronto, tanto que se a tela diminuir pra menos de 350px você verá uma quebra no layout. E também tem o min-width que é o oposto ao max-width, ele serve para delimitar o tamanho mínimo.

    E novamente, parabéns pelo seu projeto, ele ficou idêntico ao design proposto, continue praticando e se aprimorando. Caso algo que eu tenha dito tenha ficado confuso, por favor comente aqui abaixo que tentarei responder da melhor forma possível.

    Marked as helpful
    1
    mendesdomingosdev•110
    @mendesdomingosdevPosted 7 months ago

    @R3ygoski Obrigado por ver meu projeto <3 adorei a explicação detalhada e vou começar a aplicar, vou buscar algo que converta os pixels pra rem quando for pra textos, usar a tag br é considerado uma má prática? só por curiosidade

    1
    Bernardo Poggioni•5,280
    @R3ygoskiPosted 7 months ago

    @mendesdomingosdev, olha sobre converter pixels pra rem, não é necessário, o rem equivale a 16px por padrão, então é só dividir o valor alvo por 16. Exemplo: 15/16 = 0.9375.

    Só tome cuidado com uma coisa, se você alterar o valor do elemento root, que geralmente é a <html>, ele irá alterar o valor de rem. Por exemplo, se você colocou o font-size em 8px, para a <html> então 1rem passa a valer 8px.

    Agora sobre usar a tag <br> não é uma má prática, mesmo se usado dentro de um tag <p>, mas tem uma forma mais específica de como utiliza-la, que seria por exemplo para iniciar um novo parágrafo, sem a necessidade de ter que adicionar outra tag <p>.

    Exemplo:

    <p>
  Aqui está meu parágrafo 
  <br> Aqui está meu segundo parágrafo 
  <br> Aqui está meu terceiro parágrafo. 
</p>

    E não há de que, fico feliz em poder ajudar, caso precise de mais alguma ajuda, basta perguntar.

    Marked as helpful
    1
    mendesdomingosdev•110
    @mendesdomingosdevPosted 7 months ago

    @R3ygoski Esse do br dentro do p é realmente novo, nunca tinha visto algo assim kkkkk isso evitaria fazer vários "p"s ?

    1
    Bernardo Poggioni•5,280
    @R3ygoskiPosted 7 months ago

    @mendesdomingosdev, sim evitaria, pois isso aqui:

    <p>
  Aqui está meu parágrafo 
  <br>Aqui está meu segundo parágrafo 
  <br>Aqui está meu terceiro parágrafo. 
</p>

    é equivalente a isso aqui:

    <p>Aqui está meu parágrafo </p>
<p>Aqui está meu segundo parágrafo</p>
<p>Aqui está meu terceiro parágrafo.</p>

    Só note uma coisa, se você por exemplo precisar estilizar o segundo parágrafo, então você teria que fazer algo semelhante a isso aqui:

    <p>
  Aqui está meu parágrafo 
  <br> <span class="alguma-cor">Aqui está meu segundo parágrafo</span>
  <br> Aqui está meu terceiro parágrafo. 
</p>

    isso porque a grosso modo, a tag <br> ela não tem um fechamento, então você teria que usar a <span> e passar o conteúdo pra dentro dela. Espero que não tenha ficado confuso kkkkk

    Marked as helpful
    1
    mendesdomingosdev•110
    @mendesdomingosdevPosted 7 months ago

    @R3ygoski parece depender da necessidade né? será que apanharia de um sênior por usar span toda hora kkkkkkkkkk mas obrigado por explicar.

    1
  • Grego•1,310
    @Grego14Posted 7 months ago

    Hello! 🎉 congratulations on completing the challenge! 🎉

    You can use the max-width property on an element instead of the br element to make it break.

    You should add a more descriptive alt attribute, example: alt='Scan the qr code and go to Frontend Mentor site.

    I recommend using max-width: 90%; instead of width: 288px; in the img element

    You did amazing! I have nothing more to add.

    I hope this helps!

    Marked as helpful
    1
    mendesdomingosdev•110
    @mendesdomingosdevPosted 7 months ago

    @Grego14 Thanks, I always don't know what to do with the alt attribute 😂 what's the difference between using max-width and a fixed width? edit: oh I see to break elements right?

    0
    Grego•1,310
    @Grego14Posted 7 months ago

    @mendesdomingosdev You can see the difference between width and max-width in MDN.

    👉 width

    👉 max-width

    1
  • RickM19•10
    @RickM19Posted 7 months ago

    You: How can I make the text break by himself instead using br tag?

    You can try the CSS style text-wrap: wrap;

    this property make your text wrap by himself

    1
    Grego•1,310
    @Grego14Posted 7 months ago

    @RickM19 👋 Hello! The default value for text-wrap is wrap, so it is not necessary to add it, unless it has already been removed before.

    1
    mendesdomingosdev•110
    @mendesdomingosdevPosted 7 months ago

    @Grego14 so is there no way? 😶‍🌫️

    0

Please log in to post a comment

Log in with GitHub

Join 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