Skip to content
Submitted almost 3 years ago

NFT-preview-card-component using css grid

Joseph Weathington•20
@Joeweath
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What is the best way to add margin to CSS grid that's also responsive? I didn't work on my website being responsive as I focused on my new grid skills instead.

Community feedback

  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    To get rid of the accessibility/HTML issues shown in your Report:

    • wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more
    • have at least one <h1> in your code
    • <section> and <article> usually need a heading; so if you don't need a heading in it, use some other element such as <div>

    Great job! :)

    Marked as helpful
    0
  • Eklemis Santo Ndun•620
    @eklemisPosted almost 3 years ago

    Hi Joseph,

    That's a great solution. Keep working and growing!

    For your question about responsiveness, you have to use Media Query on your css. It is recommended that you write style for mobile screen first, then code the style again for desktop screen wrapped inside @media only screen and (min-width: 768px) { /* For desktop: */} for desktop screen (you can add other screen size as well. I used to arrange the order like below: /* Put all style for mobile screen here */ @media only screen and (min-width: 768px) { /* Put all your style for desktop screen here */ } For more reference on this you could read here

    Also for margin of your grid you can use vw to your width instead of 'px'. 'px' is static value, while 'vw' is portion of screen width, range from 1 to 100vw (maximum width of the screen)

    Marked as helpful
    0
  • Joseph Maramba Weyao•195
    @mamba-dev-KEPosted almost 3 years ago

    Nice attempt. It is generally recommended that grid should be used for layouts that feature two dimensions such as both a row and column while flexbox should be used for layouts that feature one dimension i.e. either row or column. For instance, your author class is a good candidate for flexbox to make the items center aligned on the vertical axis. You can simply do this by setting display of the class to flex and align-items to center. In short, flexbox is meant for layout elements within UI components while grid is meant for placing all the UI components on different columns and rows on the whole page. A good course for learning CSS grid is this free course by Wes Bos (https://cssgrid.io/). Consider checking it out for a deeper understanding of grid.

    Marked as helpful
    0
  • Andres M. Prieto•150
    @AndresMpaPosted almost 3 years ago

    It seems that you got some issues with your solution:

    • Use a main tag as wrapper to your app
    • Use at least one h1 tag
    • If you want to use the article tag, you have to use a heading with it, if you don't want to add that, change the article for another tag such as "div", "span" or other
    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord