Response page using CSS Grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 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

  1
• 

  Fernando FeN•425

  @Fernando0654Posted almost 3 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

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 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.

  0

  

  Fernando FeN•425

  @Fernando0654Posted almost 3 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

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 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?

  0

  

  Fernando FeN•425

  @Fernando0654Posted almost 3 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

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 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"?

  0