Skip to content
OverviewSolutions
2
Comments
3
Mariam Fkini
@Mariam-Rf

All comments

  • Mariam Fkini•80
    @Mariam-RfPosted almost 3 years ago

    Hey Saran. Great job on completing this challenge :) As for your question, the layout is not placed in the center when it comes to the laptop and desktop view. I have a few suggestions for you to make the design better, but they're not mobile-first. For the body: Start by changing the height to 100vh Change the display of the body to display: flex instead of grid Also, change "justify-content" and not "justify items" because it's incorrect. Both"justify-content" and "align-items" should be on "center". Also, you should note that they are only used with flex layout and not grid. When you change the settings of the body, you'll easily have your card's container in the center of the page, instead of using "position: absolute" and "transform: translate". Again, you'll need to set the mobile and tab view. It can be done by just changing the flex-direction to "column".

    For the card's container: Change the width to use percentage instead of pixels, since it's a more flexible option to change depending on the screen size. For desktop and laptop, you may want to put it on 60%. I played with your code in my dev tools in Chrome and found that this is optimal.

    Hope this helps. Good Luck! :)

    Marked as helpful
    1
  • Mariam Fkini•80
    @Mariam-RfPosted almost 3 years ago

    Hi! For the eye icon to appear, you need to add an overlay just like you did, but you need to include the eye icon inside of the div with a class of "color". Change the div opacity from 0 to .6 on hover instead of having it as "display: none". You can check other people's code to see the different approaches to how they did it. Good Luck!

    Marked as helpful
    0
  • Brandon•60
    @walker861Submitted almost 3 years ago

    This was my first challenge on Frontend Mentor. I would be greatly appreciative if anyone can review the way I used Flexbox and Grid together and provide feedback whether there is a better solution that what I used.

    Basically, I used a large Flexbox column (body tag), Grid within the main box (container), and two Flexboxes: (1) Area with the ethereum and clock icons (2) Avatar and author area

    Any other feedback would be greatly appreciated!! I am sure there are ways my code could be more concise.

    Thanks!!

    NFT-card-grid-flexbox

    2
    Mariam Fkini•80
    @Mariam-RfPosted almost 3 years ago

    Hello Brandon, I read your CSS and it's perfectly made. I have a note about the view icon because the most common solution is to add an overlay (div) on top of the image, with the icon inside of it. But the way you approached it is smart too and I like it. There's no better solution if you get right, it's just different approaches. Also, I think when it comes to grid, it's mainly left to a more complex layout with many columns and rows. That's the general opinion about it. I hope this helps and good luck :)

    Marked as helpful
    0