@naomidzunic
Latest solutions
Latest comments
- @BenjaDotMin
Hello Naomi! Apologies if I read this wrong, but we can very easily center your card, and remove the scrolling.
On your .container tag, remove: margin: 25% auto 25% auto; (also the media query margin at 510). On your body tag add: display: grid; place-items: center; height: 100vh;
And that should center things up nicely :) Great work, you have made the card itself very clean.
- @catherineisonline@BenjaDotMin
Hello! I see you have very precise margins to centre your card. We could make this far simpler by removing these styles from .qr-container:
- display flex
- flex-direction
- height (both of them)
- margin
- align items
- margin-top (and the media query at 1020)
- margin-bottom
Then to your body tag add:
- display: grid
- place-items: center
- height: 100vh
That should centre your card with less code, but also remove the unrequired scrollbar on mobiles. Hope that helps!
Marked as helpful - @strosi@BenjaDotMin
I really like what you did with the validation animation. Subtle but it really helps add quality. Would you mind if I suggested you add:
- .notify__field{z-index:1;}
That will stop your error text overlapping the input during animation, and look even better :)
Good stuff :)
Marked as helpful - @BenjaDotMin@BenjaDotMin
Apologies for the preview screen, I assume its something to do with lazy loading the components in react. Pop open the site and it should be fine!
- @Mattvp21@BenjaDotMin
Hello there!
You really do have a great grasp with grid, for your first attempt. Much better than I did!
However, regarding your question:
- To your body tag add: height:100vh; display: grid; place-items: center;
- To your main tag add: max-width: 1440px;
That should improve the size and positions. You can play around with values to match what you need.
It wont make a difference, but consider the shorthand syntax for grid-template, to save yourself repeating values and make it easier to read.
For example: grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;
Could simply become: grid-template: repeat(2, 1fr) / repeat(4, 1fr);
Marked as helpful - @imparassharma@BenjaDotMin
Hello Paras!
The issue is when you hover over the thumbnails, they get an additional border, which changes the height of the parent div by an additional 2px, giving the visual stagger.
To fix this I would:
- on ".img-row img" add: border: 2px solid transparent; (so they always have a border)
- on ".img-row img:hover" change your border style, to: border-color: hsl(26, 100%, 55%);
Hope that helps!
Marked as helpful
