Skip to content
OverviewSolutions
27
Comments
11

Macaulay Omoikhoje De-great

@MacChristoLagos, Nigeria.550 points

I'm learning how to code and write programs and web development.

I’m currently learning...

Web development with HTML5, CSS3,TailWind CSS, ReactJS and more...

Latest solutions

View more solutions

Latest comments

  • weValueYourPrivacy•10
    @weValueYourPrivacy
    What challenges did you encounter, and how did you overcome them?

    guessing the size

    What specific areas of your project would you like help with?

    not sure if i got the size of the card right

    qr card minimalist code

    1
    Macaulay Omoikhoje De-great•550
    @MacChristo

    First off, Your QR image isn't showing on the live site. I think your image path is wrong. It should be images/image-qr-code.png. Try adding a bit of border-radius to your QR code. From what I saw in the Frontendmentor preview, the border radius are missing.

    Try these corrections in your code. You did well mate. And I liked how you didn't use a lot of code. When i did mine some time ago, i used a whole lot of code and it wasn't even as clean as yours😂😂😂😂.

    Good work 👍

    Marked as helpful
  • Macaulay Omoikhoje De-great•550
    @MacChristo

    You sure have a lot of css and media queries there. But try to make all the content of your site show at different screen sizes. I still have quite a problem making mine show though, but what i do is give a lot of padding-bottom in vh to the last div or container on the site. By that at least, all my content shows. Your desktop button should have {border: none}

    Marked as helpful
  • Macaulay Omoikhoje De-great•550
    @MacChristo

    Add a width of 190px to the .product-heading

    .product-heading {
width: 190px;
}
    Marked as helpful
  • Macaulay Omoikhoje De-great•550
    @MacChristo

    if you are having issues with responsiveness, I think this might be able to help you.

    Marked as helpful
  • Macaulay Omoikhoje De-great•550
    @MacChristo

    1.when you put an image on the screen, you need to style it by tweaking the width, height, etc

        font-family: "Outfit" , 'sans-serif';
    font-size: 15px;
    background-color: var(--light-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh-1px);   *<---Remove*
    /* margin: 1.25rem; */      *<----Remove*
    align-content: center;
    height: 100vh;                     *<----Add*
}

    for the container-div

    .container {
    max-width: 320px;
    justify-content: center;
}

    Remove the padding on the container-img

    .container h1 {
    color: var(--dark-blue);
    text-align: center;
    margin-bottom: 1rem;
    max-width: 285px;      *<----Add*
    font-size: 22px;           *<----Add*
}

    .container p {
    color: var(--grayish-blue);
    text-align: center;
    max-width: 260px;     *<---Add*
}

    .attribution {
    font-size: 11px;
    text-align: center;
    position: relative;      *<----Add*
    top: 2rem;                  *<---Add*
}

    Hope this helps....Happy coding

  • Macaulay Omoikhoje De-great•550
    @MacChristo

    Try and wrap your main contents inside a <main> tag. Since there are only two object on the body, the container and the attribution, you can have something like this:

    body:{
    display: flex;
    flex-direction: column;
    align-items: center;   *This will center the objects after using flex*
    justify-content: space-between;      *Add these to the body*
    overflow: hidden;
    height: 100vh;
}

    Remove all styles from your attribution

      <footer>

    <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by Mabs.
    </div>
  </footer>

    Your attribution should be in footer tag. And no need to wrap the attribution element in a paragraph tag. All styles they need should be applied to the .attribution class. The follow-come styles for the attribution are even enough. just need to reduce the font-size. Hope this helps.

    Marked as helpful
View more comments