Skip to content
OverviewSolutions
27
Comments
9

Fernando Pérez

@fermopMéxico480 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...

🟢 Vue 🔵 Tailwind

Latest solutions

View more solutions

Latest comments

  • Fernando Pérez•480
    @fermop

    Hi benjach, how are you?

    I can see that the image is not showing because the value into the src attribute. It can be fixed by adding the following:

        <img src="./images/image-qr-code.png" alt="codigo Qr">

    The qr-code-component-main folder is the root of your project and your index.html is looking for an image into a folder of the root directory. Hope it helps! 😄

    Marked as helpful
  • Fernando Pérez•480
    @fermop

    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
  • Fernando Pérez•480
    @fermop

    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
  • Fernando Pérez•480
    @fermop

    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
  • Fernando Pérez•480
    @fermop

    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
  • Fernando Pérez•480
    @fermop

    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
View more comments