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 ?
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
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).
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:
@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!
Feedback bem-vindo.
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!
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.
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!
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!
Hello,Great job on completing the challenge!
I have a suggestion:
a tag with the class "atribution" for better contrast accessibility.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!
Your opinion is welcome.
Hello, Great job completing the challenge!
A suggestion:
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!
All feedback are welcomed
Hello, Great job on the challenge!
I have some feedback to share.
margin-top to margin-block for the button tag. This would create space at the top and bottom, improving the mobile layout.button.button:hover {
background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
}
Keep up the good work!
Hello, Great job on completing the challenge.
I have a suggestion:
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!
Hello, please I'd appreciate it if you could review my work and give your honest opinion. I'll be glad if you follow me too. Thanks!
Hello,I want to compliment your work on the challenge; it looks really great! Well done!
I have a constructive suggestion for you:
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!
The project took me around 6-7 hours to complete
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!
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.
