@gabrielmorandi
@Otaviano-Manoel
Submitted
main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Foi assim que posicionei o painel no centro. Gostaria de saber se existe uma forma mais correta de fazer isso ou se essa forma já está boa?
@gabrielmorandi
Posted
Salve @Otaviano-Manoel👋,
Você fez exatamente como proposto no desafio conseguindo centralizar perfeitamente o card no centro da tela, neste caso resolveu perfeitamente o "problema"!
Mas existem sim diversas maneiras de se centralizar algo na tela ou dentro de algum componente:
.card {
display: flex;
justfy-content: center;
align-items: center;
}
ou
.card {
display: grid;
place-items: center;
}
estas duas formas são as mais fáceis e recomendadas de se centralizar algo, por isso fazer um HTML bem estruturado é muito importante para a estilização.
Por mais que este seja um desafio inicial, tente pegar o costume de sempre colocar sempre uma div.nome-da-classe dentro da tag main, para que seu código fique mais compreensivo e escalável.
<main>
<div class="card">
<! -- conteúdo da div -->
</div>
</main>
Do mais tente comentar sempre em inglês para obter sugestões de mais pessoas também! Espero ter ajudado, Bons estudos! 😄
Marked as helpful
@BayoOtomuola
Submitted
I had difficulty trying to put out the horizontal scroll in the mobile phase but it didn't actually.
@gabrielmorandi
Posted
Hi @BayoOtomuola 👋, great job on your news homepage! The layout looks clean and the design is visually appealing. I have a few suggestions that could improve your code and make your page even better:
Consider separating the CSS for the mobile and desktop versions of your site using media queries. This will make it easier to maintain and update your styles in the future.
In your CSS, you have some font sizes specified using rem and others using px. It's a good idea to stick with one unit, preferably rem, for better responsiveness and consistency across different devices.
Here's an example of how you could update your code with these suggestions:
/* Add this media query to separate mobile and desktop styles */
@media (max-width: 575px) {
/* Add mobile-specific styles here */
body {
font-size: 15px;
}
#web3-img {
width: 445px;
}
/* Add other mobile-specific styles */
}
/* Move your existing CSS rules here and update the font sizes to use rem */
body {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 1rem;
overflow-x: hidden;
}
#web3-img {
width: 28rem;
}
/* Update other CSS rules to use rem */
I understand that you are experiencing problems with horizontal scrolling in the mobile layout of your project. Here is a suggestion to resolve this issue:
* {
box-sizing: border-box;
}
@media (max-width:575px) {
.second-section-text {
display: flex;
flex-direction: column;
}
}
Your .third-section is with width: 600px. Try changing using media queries.
Check for other elements that may be causing horizontal scrolling and adjust them as needed.
I hope these suggestions help you improve your project. Keep up the good work, and happy coding! 😄
@errondo
Submitted
@gabrielmorandi
Posted
Hello @errondo! 👋, welcome to the Frontend Mentor Community!
Congratulations on your QR Code component project! 🎉 It looks clean and well-organized. However, I would like to suggest some improvements that can further enhance your code:
<header>, <main>, and <footer> tags to clearly separate the different sections of your component.<header>
</header>
<main>
</main>
<footer>
</footer>
max-width and width: 100% to allow the image to resize according to the device's size:.item img {
max-width: 300px;
width: 100%;
border-radius: 20px;
}
alt attribute as follows:<img src="./images/image-qr-code.png" alt="QR Code for Frontend Mentor website">
I hope these suggestions are helpful! Feel free to ask questions if you need more information. Good luck and keep up the great work! 😄
@huyphan2210
Submitted
Hello😁! My name is Huy, and this is my solution for this challenge.
What I used🚀: HTML, CSS, Typescript, Svelte, Moment.js.
Thank you! Cheers🎉.
@gabrielmorandi
Posted
Hi @huyphan2210, good job completing this challenge!
Your code looks great, and I can see that you put a lot of effort into it. I especially like how you handled the input validation and error cases.
One suggestion I have is to add an event listener to trigger the calculateAge() function whenever the enter key is pressed in one of the input fields. You can do this by modifying your handleFocusOut() function like this:
// Add event listener to trigger calculateAge() on enter key press
e.currentTarget.addEventListener("keydown", (event) => {
if (event.keyCode === 13) {
calculateAge();
}
});
Overall, great work, and keep up the good coding! 😄
Marked as helpful
@krystinee
Submitted
Moving the QR component around was probably the most difficult as getting all the information arranged to look right. The area I am most unsure of is my mobile design. It didn't look perfect, but it was as good as I could get it. I should have begun with a mobile-first design but I didn't think the project was going to be a responsive challenge. I hope my code looks nice and organized though!
@gabrielmorandi
Posted
Hi @krystinee👋, welcome to the Frontend Mentor Community!
I have some suggestions you might consider to improve your code:
Some elements of your site are already pre-styled by the browser itself, so to remove these pre-styles and minimize inconsistencies in browsing, a css reset is commonly used, see about that here.
After applying the CSS reset, to effectively center your .qr-component in the center of the <main> tag, just apply this to your css:
main {
display: grid;
place-items: center;
height: 100vh;
}
After applying this style, just go to your .qr-component and remove the margin: 250px auto;
To make the contents of your .qr-component one below the other, just put in your style flex-direction: column; this style will make each child element of the .qr-component have a width of 100% and placing one below the other.
Your @media screen and (max-width: 1200px) { is causing the white border to only appear on devices that have a width less than or equal to 1200px.
In this element selection you made in your css section, .qr-component { you are selecting all sections and all elements with class .qr-component from your HTML, and you don't want that, you want to style your .qr-component then select it normally as you did inside your @media , because if there are other sections in your future projects this will cause style collisions.
Instead of putting margin-bottom: .5rem; in your elements apply the gap: .5rem; inside your .qr-component class, doing this way every element inside that class will have exactly the defined distance from one to another.
And finally use the <footer> tag instead of <div class="attribution">. The <footer> element contains information about the author of the page and the copyright of the site.
I hope those tips will help you!
Good job, and happy coding! 😄
@Stress0219
Submitted
@gabrielmorandi
Posted
Hi @Stress0219👋, welcome to the Frontend Mentor Community!
I have some suggestions you might consider to improve your code:
.hero__picture element, so that it fits your <h1> size as well as design, add it to your @media screen.hero__picture {
width: 80%;
}
css/Style.css and in the first line of the document put the following line of code:@import url('https://fonts.googleapis.com/css2?family=Open+Sans: wght@400;600;700&family=Poppins:wght@700&display=swap');
and with that you will be important both Poppins font and Onpen sans font for your project! If you want to look for other fonts and insert them into your projects, just access the google fonts website and select the desired fonts and sizes and import them into your project!
--pading-container: 80px 0px; only with a larger px value like this::root {
--pading-section: 160px 0px;
}
<img> tag, like this:<img src="" alt="Alternative text is used to describe the content of an image.">
In addition to helping the user in situations, such as an error in loading the image due to a bad connection or even an error in the url of the image, it is also of paramount importance for people with visual impairments, thus making your site much more accessible.
I hope those tips will help you!
Good job, and happy coding! 😄
@Maacaa0
Submitted
Hey guys,
it was my first time using css grid. I wonder if I used it right.
Is it alright that for smaller screens I used display: flex to align everything in one column. Or would it be better to stick with grid?
Feedback appreciated.
@gabrielmorandi
Posted
Hi @Maacaa0, good job completing this challenge!
First I would like to congratulate you, because as your first time using the CSS Grid you managed to use this wonderful resource perfectly, but I saw that you used the grid-column-end and grid-column-start in the same element, because of that I would like to contribute with a tip, try to have a look here how to do this in a faster way.
As for when to use CSS Flex and CSS Grid, basically each one has a purpose, so each one will solve a certain problem in a certain way, it's up to you based on your experience using these resources to choose which one will best suit you to solve the problem. So none of these features is better than the other both were made to complement each other.
Good job, and happy coding! 😄
Marked as helpful
@tawiahnyt
Submitted
@gabrielmorandi
Posted
Hi @tawiah007👋, welcome to the Frontend Mentor Community!
I have some suggestions you might consider to improve your code:
First your code has repeated lines (right at the top of the page).
Try to put a width in px of your .code, so that the screen size does not interfere with the size of your qr-code-component, making it more accessible, making it centered on the screen and with the same size.
Use the <main> tag to define the main content within the <body> in your document or application instead of using <div class="code"> to improve site accessibility.
Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.
Finally I saw that in your code you used @media screen to make your site responsive, but you didn't style it, let's fix that?! Good job, and happy coding! 😄
Marked as helpful
@nishantkalburgi
Submitted
@gabrielmorandi
Posted
Hi @nishantkalburgi, good job completing this challenge!
I have some suggestions for you:
Use the <main> tag to define the main content within the <body> in your document or application instead of using <div class="topmain"> to improve site accessibility.
In your css file use margin: 0 auto; in your .topmain element so that it is centered horizontally on your page. I recommend the site https://developer.mozilla.org/en-US/docs/Web/CSS/margin to see more about margin in css.
To leave the requested color in the design in your css use:
body {
height: 100vh;
background-color: #d6e1f0;
}
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
border-radius of the css with a smaller amount of px like for example: border-radius: 5px; to have only the edges of the curved edges as in the design.I hope those tips will help you!
Good job, and happy coding! 😄
@Jessdantas
Submitted
Boa tarde, galerinha!
Podem me ajudar?
Quando crio meu site url ativo a página fica desconfigurada. E na página do visual Code está correta.
Já fiz testes no Chrome e Internet Explore e em ambos o caso a página aparece desconfigurada.
Quem puder me ajudar agradeço de coração.
@gabrielmorandi
Posted
Olá @Jessdantas👋,
O erro é muito bobo e simples de resolver, a pasta onde está seu style.css está nomeada como "Css",e no seu <link rel="stylesheet" href="css/style.css"> você o colocou com c minúsculo, para resolver só mudar o nome da pasta ou arrumar o caminho que você colocou no seu código!
Espero ter ajudado!
Good job, and happy coding! 😄
Marked as helpful
