The <picture> element adds an extra 3px at the bottom of the image which I wasn't able to fix so any help on that is greatly appreciated. Apart from that please make sure to tell me any way I could optimize my code or make it follow best practices without hesitation :)
Hi Matteo, how are you?
Answering to your question, you can get rid of that white space by doing the following:
.product-showcase {
width: 100%;
display: block; <--
}
The img tag has a display: inline by default, which adds that white space.
Suggestions
img tag doesn't have an alt attribute. Images must have alt text unless it is a decorative image, for any decorative image each img tag must have empty alt="".alt + z. The extension is px to rem by Marco N.The rest looks great! 🎉
Hope it helps! any questions feel free to answer this comment. :)
i have used rigid alignment to align the white div is there any better way to do it
Hi Subhashish, how are you?
Answering to your question you can center the card by doing the following:
body {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit';
text-align: center;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
If you are going to add the footer you have to add flex-direction: column;, this way your boxes are aligned from top to bottom.
Hope it helps! any questions feel free to answer this comment. :)
How do I put the triangle on the responsive share button?
Hi Machuks, how are you?
Answering to your question you can make the triangle by doing the following:
HTML
<div class="card__socials">
<p class="card__socials__text">Share</p>
<img>
<img>
<img>
<div class="triangle"></div>
</div>
CSS
.card__socials {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
@media(min-width: 887px) {
.triangle {
width: 1.125rem;
height: 1.125rem;
background-color: hsl(217, 19%, 35%);
transform: rotate(45deg);
position: absolute;
bottom: -0.5rem;
}
}
In this code, the container of the socials has a position: absolute and css flex with justify-content: center;. If any of its children has a position: absolute it will be positioned according to its parent's properties, in this case, it'll be centered because of css flex and positioned to it because of its parent's position property.
The triangle is because if you make a rotated square 45 degres with 18px width and height you'll have like a diamond shape, you'll only need to position it with the bottom property to make from its half part to top disappear. It's important to point out that it has to be styled on a media querie on responsive design, this way it will not be visible at mobile design.
Hope it helps, feel free to see my solution to understand better this part, any question we can get in touch!
how to make this more better?
Hi Akash, how are you?
I really liked the result of your project, but I have one tip that I think you will like:
I noticed that the discount price doesn't have the line-through just as the design has, to fix this we can do the following:
.price-2{
position: absolute;
color: gray;
padding-top: 13px;
𝘁𝗲𝘅𝘁-𝗱𝗲𝗰𝗼𝗿𝗮𝘁𝗶𝗼𝗻: 𝗹𝗶𝗻𝗲-𝘁𝗵𝗿𝗼𝘂𝗴𝗵;
}
The rest is great!!
Hope it helps 😄
How could I have better positioned the background to make it more responsive? Are there any suggestions you have for improving this project?
Hi Ari, you did a good job! your page looks so good.
As Hassia said, give the body a background-size of contain. To be honest, I can't understand the differences between contain and cover but remember that fortunately the documentation is in the MDN page. Here's the link if you'd like to chek it out!
I noticed that the card is not centered at higher resolutions and the background is not positioned, to fix these things we can do the following:
body {
/* Positioning the background */
background-size: 100% 50vmin;
/* Centering the card */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.card {
margin: 0;
}
.attribution {
margin-top: 3rem;
}
There is an accessibility report due to semantic html elements. Instead of using a div on your footer, try to use the footer element so it'll be easier for a screen reader to see the different parts of the page.
I see that you are using px instead of rem. I highly recommend you to use rem because if the user has the size of their font smaller or larger your page would be the same. Here are two videos that explain it better:
If you have any questions feel free to send me a message or answer this comment. I hope it helps!
Is there a way to determine the specific size the divs should be?
Hi Tyler, first of all you did a good job! your page looks so good. Answering to your question, you can unlock de pro membership, that way you'll have access to Sketch and Figma files where you can see the exacly size you'll need to build a proyect.
I see that you have some accessibility reports and I have some suggestions for you:
main element (where the main content of your page should be) instead of a div.h2 instead of an h1, remember that every page should contain at least a level-one heading. <img class="qr-img" src="images/image-qr-code.png" 𝗮𝗹𝘁="𝗤𝗥 𝗰𝗼𝗱𝗲">
If you have any questions feel free to send me a message or answer this comment. I hope it helps!
Hi Ian! You did a really good job! your page looks cool on mobile and desktop devices.
I have some suggestions for you:
div instead of semantic html elements such as main (where the main content of your page should be in).footer inside the body of your page. Although you have a footer, it doesn't recognize it because you have your footer out of your body:<body>
<div class="card">
<img class="qr" src="./images/image-qr-code.png" alt="" />
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</𝗯𝗼𝗱𝘆> <---
<𝗳𝗼𝗼𝘁𝗲𝗿> <---
<div class="attribution">
<div>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a></div>
<div>Coded by <a href="https://www.frontendmentor.io/profile/ianbuen">@ianbuen</a></div>
</div>
</footer>
If you have any questions feel free to send me a message or answer this comment. I hope it helps!
Hola Matias! Excelente trabajo, tu página es responsiva para dispositivos móviles y en desktop.
Veo que al momento de tener un móvil en horizontal en tu página no se puede deslizar hacia abajo para ver todo el contenido. Este problema me pasó a mí cuando realicé este proyecto y lo pude solucionar poniéndole un min-height con pixeles al body, ya que el container que tiene el card es más grande que el height de un celular en horizontal y esto no incrementa de tamaño al body debido a que tiene asignado el 100vh. (no estoy muy seguro de que sea por esto, pero si alguien puede corregirme se lo agradecería muchísimo jaja)
También veo que en tu párrafo usas pixeles en su font-size. Te recomiendo usar rems, usualmente tienen un tamaño de 16px, usando rems permitirá que el tamaño de tus textos sea más responsivo en cada dispositivo, ya que no todas las personas tienen configurada el mismo tamaño de fuente. Este video explica muy bien los ems y rems: https://www.youtube.com/watch?v=_-aDOAMmDHI
Por otra parte, veo que en el apartado de reportes te sugiere usar elementos semánticos tales como main y footer, estos no son de gran impacto para el usuario pero sí para leer el código y ubicar más fácil las secciones de nuestra página. Y por último veo que te sugieren utilizar un h1 ya que estás utilizando un h3. Recuerda que las páginas solamente pueden tener un h1 ya que este es el título de toda la página, después los subtítulos (h2), luego subsubtítulos (h3) y así hasta llegar a h6.
De todas maneras hiciste un excelente trabajo, te ha quedado muy bien el proyecto!! saludos Matias :)
