Skip to content
OverviewSolutions
27
Comments
11
Macaulay Omoikhoje De-great
@MacChristo

All comments

  • weValueYourPrivacy•10
    @weValueYourPrivacySubmitted 23 days ago
    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
    @MacChristoPosted 23 days ago

    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
    0
  • Macaulay Omoikhoje De-great•550
    @MacChristoPosted about 2 years ago

    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
    0
  • Rohan Arora•70
    @rohan-arora20Submitted over 2 years ago

    I have used HTML and CSS (Flex Box and CSS GRID) to complete the challenge. Room for improvement is always there. Please suggest any changes that could be made to make this more similar to the solution.

    Product Preview Card Component

    1
    Macaulay Omoikhoje De-great•550
    @MacChristoPosted over 2 years ago

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

    .product-heading {
width: 190px;
}
    Marked as helpful
    0
  • Samantha•30
    @samanthascarcellaSubmitted over 2 years ago

    I found it very difficult to keep my card in the centre of the page. What I am more concerned about is how I made the page responsive. This is my first project (ever) and so I am hoping to get back feedback on how I made my page responsive and where I need to improve for best practices.

    Responsive NFT card (HTML, CSS)

    3
    Macaulay Omoikhoje De-great•550
    @MacChristoPosted over 2 years ago

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

    Marked as helpful
    0
  • Abigail•10
    @AbbyiegirlSubmitted over 2 years ago

    I found the project tough. I can't assure 100% that my container contents are aligned properly but i am willing to take corrections and learn. I spent 2 days on this.

    QR code challenge

    3
    Macaulay Omoikhoje De-great•550
    @MacChristoPosted over 2 years ago

    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

    0
  • Macaulay Omoikhoje De-great•550
    @MacChristoPosted over 2 years ago

    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
    1
  • Sushant nande•30
    @sushant2313Submitted over 2 years ago

    This was so challenging. For the first time I tried the mobile first and desktop. When I did mobile version it went smoothly. but I was stuck on desktop version for so long. Still couldn't figure some things out as you can see on the site and github. so can anyone please tell me how can I do desktop version for this. I've been on this same challenge for past 2-3 days but today I thought I'll just ask here since I couldn't do it. so tell me somethings I should try to make desktop version? or should I start from desktop first ? any suggestions and criticism are highly appreciated! thank you.

    Stat Preview Card

    3
    Macaulay Omoikhoje De-great•550
    @MacChristoPosted over 2 years ago

    Definitely, using flex is much easier than using grid. You wouldn't have to start worrying about which column or which row you element should be on.

    1. I recommend you have a div with a class name of "parent-container"
    parent-container {
    height: 95vh;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;

    2.Inside the parent-container div, insert a main-div that will contain your text and image.It should have two section tags. One for the image and one for all the texts. No styles to the sections

    .main-div {
    display: flex;
    flex-direction: row-reverse;

    3.Have a div in the first section for the image and give a background color.

    .img-div {
    width: your desired width;
    height: your desired height;
    background-color: hsl(277, 64%, 61%);
    border-radius: 0 10px 10px 0;
}

    4.insert your image into the img-div and style it.

    .desktop-img {
    width: same width as your img-div;
    height: same height as your img-div;
    display: block;
    opacity: 0.8;
    mix-blend-mode: multiply;*<----- this will make your image blend with the background color of 
   the img-div, creating the purple-like color of the image.*
    border-radius: 0 10px 10px 0;

    5.In the second section tag, insert a div that will serve as container for all the texts.

    .text-container {
    width: preferably same width as the img-div;
    height: preferably same height as the img-div;
    background-color: hsl(244, 38%, 16%);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: center;
    padding-right: 50px; *<----- this will give insert a space between the img-div and the text-container*
    border-radius: 10px 0 0 10px;
}

    6.inside the text-container, insert a div and give it a margin of 30px to make spaces around the texts

    text-div {
margin: 30px;
}

    7.Then inside the text-div, you have 3 divs each for the three columns of text in the text section. 8.In the third div, you have the stats. Each stats should be in a div(stats-div) as The numbers as level 1 headings and the words under them as paragraphs .stats-div will contain 3 div for each stats.

    stats-div {
    color: hsla(0, 0%, 100%, 0.6);
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

    Hope this helps.

    Marked as helpful
    1
  • Macaulay Omoikhoje De-great•550
    @MacChristoPosted over 2 years ago

    Adding a box-shadow will be nice

    1
  • Macaulay Omoikhoje De-great•550
    @MacChristoPosted over 2 years ago

    Give the card title Equilibrium #3429 a different class name. like: <h1 class="card-title">Equilibrium #3429</h1> <----add----

    1. The card title Equilibrium #3429 should have a hover element with the color set to cyan. .card-title:hover { color: hsl(178, 100%, 50%); } <----add-----

    2. Also in this, <a href="https://twitter.com/@oyeinbomo">Jules Wyvern</a> <----Remove---- remove it from the anchor tag and place it in a span tag and give it a class name like: <span class="avatar-name">  Jules Wyvern </span>. <----add----

    3. Then on hover, set the color to cyan: .avatar-name:hover { color: hsl(178, 100%, 50%); }<----add----

    Hope this help!... Keep coding👍

    Marked as helpful
    0
  • Amuwa Timothy•60
    @IamtimonSubmitted over 2 years ago

    I did this challenge a couple of days ago, but I realised it was not responsive. So I had to go back and learn how to build a responsive web page, how did I do ? I do need your feedbacks, thanks

    responsive page using html and pure css

    1
    Macaulay Omoikhoje De-great•550
    @MacChristoPosted over 2 years ago

    Nice work. Try to move your attribution to the bottom of the page since it's not so significant in the project and also you can reduce the font-size to around 11 or 10px.

    1
  • mvrius•260
    @mvrius4Submitted over 2 years ago

    I've encountered a lot of problems when I've tried to host the project, but I've somehow done it. A nice experience with Tailwind, excepting the fact that there are some problems with the hosting, especially Vercel and Netlify.

    QR Component with Tailwind

    1
    Macaulay Omoikhoje De-great•550
    @MacChristoPosted over 2 years ago

    If you want to host your project, simply use Github. It's easy to use and it's also fast.

    Marked as helpful
    1