Skip to content
OverviewSolutions
23
Comments
12
Luan Barcaça
@barcaca

All comments

  • Luan Barcaça•500
    @barcacaPosted 6 days ago

    Both the website and github are down.

    0
  • Thomas TS•810
    @ttsoaresSubmitted 12 months ago

    In the Figma file, there are texts using 120px and 48px. Those font sizes are not part of the typography specifications. My approach was to use custom values to those cases, like the classes text-[7.5rem] and text-[3rem]. The problem is that this result in a line height that do not match that seen in the Figma designs...

    What is the recommendation in this situation ?

    NextJS, Tailwind, React Hook Forms, react-map-gl

    1
    Luan Barcaça•500
    @barcacaPosted 12 months ago

    I have two feedback option:

    Option 1:

    <div class="text-[7.5rem]/[110px]">
 Your text here.
</div>

    This option seems to attempt setting both the font size and line height directly.

    Option 2:

    <div class="text-[7.5rem] leading-[3rem]">
  Your text here.
</div>

    This option is more aligned with Tailwind CSS conventions. It separates the font size .text-[7.5rem] and line height .leading-[3rem]

    I would suggest referring to the official Tailwind CSS documentation on Font Size and Line Height. This will ensure a consistent and well-supported implementation.

    I hope you found this helpful

    0
  • Catalina Arriagada•10
    @catalina-arriagadaSubmitted 12 months ago

    I found an error compilation with @content in @media queries (that's because the media queries are directly in the class .container). Style Rule said 1440px, so I made it, but in a simple notebook pc, it looks in the mobile version (and it's not in order).

    Responsive Results/Summary Component SASS

    1
    Luan Barcaça•500
    @barcacaPosted 12 months ago

    Great job on completing the challenge!

    It seems that the desktop version is not displaying correctly because you set the minimum width (min-width) to 1440px

    Here are a few suggestions to enhance your code further:

    • Your media query for the screen width seems to be set for larger screens. Consider adjusting it to @media screen and (min-width: 796px) for better responsiveness.
    .container {
    @media screen and (min-width: 796px) {
        /* Styles specific to larger screens */
    }

    -Remove margin-left and add margin-inline: auto:

    .container .summary {
    border-radius: 32px;
    /* Remove margin-left and add margin-inline:auto */
    margin-inline: auto; /* Centering horizontally */
}

.container .results .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* Remove margin-left and add margin-inline:auto */
    margin-inline: auto; /* Centering horizontally */
    background: linear-gradient(hsl(256, 72%, 46%), hsla(241, 72%, 46%, 0));
}

    This adjustment ensures that the elements are centered horizontally without using margin-left. The margin-inline: auto property is a shorthand for setting both margin-left and margin-right to auto, which is commonly used for centering block-level elements

    Good luck with your coding, and keep up the good work!

    0
  • Luan Barcaça•500
    @barcacaPosted about 1 year ago

    Parabéns por concluir o desafio!

    Aqui estão algumas sugestões:

    • Você tem código repetido no responsive.css para a regra de media query (max-width: 768px) . O bloco de estilo dentro desse bloco de mídia está repetido duas vezes.

    • Considere escolher nomes de classes mais descritivos. Por exemplo, em vez de verde e branco, use nomes que descrevam o conteúdo ou a finalidade desses elementos. Por exemplo, você poderia usar algo como imagem-fundo e conteudo.

    • Considere evitar o uso do caractere "ç" em classes e IDs no CSS e HTML. Embora seja tecnicamente possível, é uma prática comum evitar caracteres especiais, como acentos.

    • Seu uso de media query parece estar correto, mas há redundâncias nas regras. Concentre-se em modificar apenas o necessário para a adaptação do layout, evitando duplicações de código. Aqui está um exemplo para simplificar:

    @media screen and (max-width: 768px) {
    #container {
        flex-direction: column;
    }

    .verde, .branco {
        width: 100%;
        border-radius: 10px;
    }

    .verde {
        height: 250px;
    }

    .branco {
        height: 400px;
    }

    .btn-compras {
        margin-top: 5px;
    }
}

    Essa abordagem reduz a duplicação de código, mantendo a adaptabilidade do layout para telas menores.

    Mandou bem, continue assim!

    0
  • Lehlohonolo Jeremia Motaung•70
    @J3r3miaSubmitted about 1 year ago

    Good day Frontend Mentor community To do this challenge I used pure HTML/CSS. Struggled to use border-radius on the container containing my image-container and card container, therefore I used border-radius on image itself and card-container.

    Solutions on how to do this would be appreciated and how to write a clean code.

    Thank you.

    Product preview card component

    1
    Luan Barcaça•500
    @barcacaPosted about 1 year ago

    Nice work on the challenge!

    For a cleaner solution, wrap both image-container and card-content in a parent div. Apply the border-radius to the parent div. Example:

    HTML

    <div class="parent-container">
  <div class="image-container">...</div>
  <div class="card-content">...</div>
</div>

    CSS

    .parent-container {
  border-radius: 10px; /* Adjust as needed */
  overflow: hidden;
}

    The overflow: hidden; property hides any content that goes beyond the rounded corners set by border-radius: 10px; in the .parent-container. Feel free to remove border-radius from other CSS properties for a cleaner look.

    Great work!

    Marked as helpful
    0
  • Brayden Williams•260
    @redstar504Submitted about 1 year ago

    Working on getting faster rather than focusing on 100% pixel parity.

    This solution took under an hour. Most of the time was spent struggling with getting the background image to look right.

    Any input appreciated!

    Quick order summary implementation

    1
    Luan Barcaça•500
    @barcacaPosted about 1 year ago

    Hello,Great job on completing the challenge!

    I have a suggestion:

    • Consider changing the color of the a tag with the class "atribution" for better contrast accessibility.
    • Adding a hover effect to both a tags and button would enhance user interaction.

    These adjustments aim to improve accessibility and user experience.

    Keep up the good work!

    0
  • Luan Barcaça•500
    @barcacaPosted about 1 year ago

    Hello, Great job completing the challenge!

    A suggestion:

    • Consider adding display: flex; and justify-content: center; to the button tag. In this case, by setting justify-content: center; on the button, you ensure that its content (text and icon) is horizontally centered within the button.

    Keep up the great work!

    Marked as helpful
    0
  • Luan Barcaça•500
    @barcacaPosted about 1 year ago

    Hello, Great job on the challenge!

    I have some feedback to share.

    • I suggest switching the margin-top to margin-block for the button tag. This would create space at the top and bottom, improving the mobile layout.
    • Also, adding the hover effect using this CSS code, will create an appealing effect on the button.
    button:hover {
  background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
}

    Keep up the good work!

    0
  • Luan Barcaça•500
    @barcacaPosted about 1 year ago

    Hello, Great job on completing the challenge.

    I have a suggestion:

    • Add the following to your CSS code:
    body {
  height: 100vh;
}

    This will set the <body> element's height to 100vh (viewport height), ensuring it occupies the entire browser window height, which helps center the card when using align-items: center; and justify-content: center;.

    Keep up the good work!

    Marked as helpful
    0
  • Luan Barcaça•500
    @barcacaPosted about 1 year ago

    Hello,I want to compliment your work on the challenge; it looks really great! Well done!

    I have a constructive suggestion for you:

    • Consider increasing the max-width value in the @media screen and (max-width: 375px) rule to max-width: 576px. Even though your work already looks fantastic at the current resolution, I believe that with this change, it could adapt to a broader range of resolutions, making it even more versatile.

    Keep up the excellent work!

    Marked as helpful
    0
  • Luan Barcaça•500
    @barcacaPosted about 1 year ago

    Hello, Great job completing the challenge!

    Here are a couple of suggestions:

    • Consider changing the width of your class="card" to width: 100% for a more responsive layout.

    • Remove padding from the main tag within your @media (max-width: 650px) to optimize smaller screen displays.

    Keep up the good work!

    Marked as helpful
    0
  • Luan Barcaça•500
    @barcacaPosted about 1 year ago

    If anyone has any feedback on how to improve, it's always welcome.

    Se alguém tiver algum feedback sobre como melhorar, é sempre bem-vindo.

    0