Skip to content
OverviewSolutions
21
Comments
8

Fernando Pérez

@fermopMéxico380 points

Hello! My name is Fernando. I am a future full stack web developer, currently based in Mexico City, open to job opportunities and collaborations!

I’m currently learning...

🔴 HTML 🔵 CSS 🟡 JavaScript

Latest solutions

View more solutions

Latest comments

  • Fernando Pérez•380
    @fermopPosted over 2 years ago

    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

    • You have one accessibility report and it's because your 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="".
    • I highly recomend you to always use rem, this way your page will always be responsive to any user's settings. There's a VS Code extension that converts px to rem and viceversa by tapping 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. :)

    Marked as helpful
    2
  • Fernando Pérez•380
    @fermopPosted over 2 years ago

    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. :)

    Marked as helpful
    1
  • Fernando Pérez•380
    @fermopPosted over 2 years ago

    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!

    Marked as helpful
    1
  • Fernando Pérez•380
    @fermopPosted over 2 years ago

    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 😄

    Marked as helpful
    1
  • Fernando Pérez•380
    @fermopPosted over 2 years ago

    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:

    1. CSS em and rem
    2. Why You Should Use REM Instead of Pixels

    If you have any questions feel free to send me a message or answer this comment. I hope it helps!

    Marked as helpful
    1
  • Fernando Pérez•380
    @fermopPosted over 2 years ago

    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:

    • One of them is that you are not using semantic html elements. In this case, it requires the main element (where the main content of your page should be) instead of a div.
    • It says that your page should contain a level-one heading. I see that in your html you are using an h2 instead of an h1, remember that every page should contain at least a level-one heading.
    • Another one is that the QR Code image doesn't have an alternative text and it's best practice to have one just in case the image didn't show on your page. e.g.:
        <img class="qr-img" src="images/image-qr-code.png" 𝗮𝗹𝘁="𝗤𝗥 𝗰𝗼𝗱𝗲">
    • 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:
    1. CSS em and rem
    2. Why You Should Use REM Instead of Pixels

    If you have any questions feel free to send me a message or answer this comment. I hope it helps!

    0
View more comments