Submitted over 2 years ago

Response page using CSS Grid

Júlio César• 80

@jlcesarr

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello friends. I'm new to the front end. I had some difficulties in carrying out this project.

My main difficulties were: 1 - Overlay the view icon over the main image, I made the code below but I couldn't resize the icon (svg) without making changes to the background-color. Since the card__image--hover was positioned absolutely relative to the div card__images. 2- Align the main/container card to the middle of the page

    .card__images {
        position: relative;
        width: 100%;
        grid-column: 2 span;
    }
    
    .card__image {
        width: 100%;
        border-radius: 16px;
    }
    
    .card__image--hover {
        display: none;
    }
    /* img.card__image:hover+img.card__image--hover {
        position: absolute;
        display: block;
        opacity: 0.5;
        height: 100%;
        top: 50px;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 200px 200px;
        z-index: 1;
        background-color: hsl(178, 100%, 50%);
    }
     */

I accept any kind of feedback, thanks for your attention.

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

👋 Hi Júlio Césa!

Quick feedback for this solution:

To make the card perfectly in the middle of the page, you can make the body element as a flexbox container.

/**
 * 1. Make the card vertically in the middle
 *     and allow the body element to grow
 *     if needed
 */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 1 */
}

There's no need to have two separate stylesheets. What's the reason of doing that?
About the eye icon and the overlay, you can check my solution and read the README to get some idea about it.
Use rem or em instead of px.
I notice that you are setting the min-width for the card on @media screen and (min-width:1440px). First, It doesn't need to be in 1440px, and second, the 1440px in the style-guide.md has nothing to do with the @media query.
Any elements that have :hover or :active states should be interactive elements, which in this case link elements.

That's it! Hopefully, this is helpful!

Marked as helpful

Fernando FeN• 425

@Fernando0654

Posted over 2 years ago

I recommend to you using a max-width property to avoid content gets too large. It looks too large on my desktop, Regarding to set content on the center, point 2, I use position: absolute and then top: 50% & left: 50% along with transform: translate(-50%, -50%). Of course, this only will work fine on desktop sizes. On mobile use something with margin: auto and it'll get done almost like magic.

Also, I don't recommend using px with the padding property because it will create you troubles. Instead, use em so they'll get a better response on big and small screens.

Regarding to your 1 point, hope you find the answer. What I did with this one was to work with a filter css property when hovering along with the svg eye.

Good luck!

Update: If you don't want to use position: absolute and then top: 50% & left: 50% along with transform: translate(-50%, -50%), you can do this to your main tag and it will work in your code to solve your problem:

Get rid of the min-width: 100vw property

Then write width: 90%, max-width: 500px and margin: auto and it should be work

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

@Fernando0654 I would recommend using either flexbox or grid to position the card in the middle of the page. It's much simpler and less code to write.

Fernando FeN• 425

@Fernando0654

Posted over 2 years ago

@vanzasetia Yikes, but it may cause some troubles when the viewport it's too small. So, that's why I prefer an absolute for this, it gaves more control

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

@Fernando0654 I use flexbox and I don't see any problem whether it's on mobile view or desktop view.

Also, what kind of control that you are talking about?

Fernando FeN• 425

@Fernando0654

Posted over 2 years ago

@vanzasetia No, of course Flexbox itself it's not a problem. I use it a lot for other stuff, but when it comes to centering a main tag it can get overflowed when using padding or even margin

It's not recommendable when the page it's an entire scrolling site

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

@Fernando0654 The way, I use flexbox on my body element, in this project:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0d192b;
    padding: 3.4375rem 1.5rem;
    min-height: 100vh;
}

You can visit my solution website and there's no issue at all. What kind of overflowing that you are talking about? The page showing horizontal rule or what?

Sorry, what do you mean by "when the page it's an entire scrolling site"?

Please log in to post a comment

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