Super fun little project to make and add to the portfolio -- only thing I probably struggled with is ensuring the card stays in the viewport so there isn't scrolling especially when it's at desktop level (currently working on).
As of this post I recently updated some final touches so it could be a minute before the changes show up.
Feedback is always welcomed!
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.
Hello, Frontend Mentor community! This is my solution to the QR code component.
I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are still free to download or use the code for reference in your projects but I longer update it or accept any feedback.
Thank you
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:
Then to your body tag add:
That should centre your card with less code, but also remove the unrequired scrollbar on mobiles. Hope that helps!
Hey everyone :) Here is another solution from the newbie challenges. This time I paid more attention to CSS reset and used min(), max() and clamp() functions for setting font-sizes and some widths and paddings. Decided to add success confirmation on submitting correct form and found out this a little difficult for had to modify some of the written code. So the overall feeling after this challenge is that I need to write more scalable code... I would be greatful for any suggestions about that.
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:
That will stop your error text overlapping the input during animation, and look even better :)
Good stuff :)
This was fun. I added some of my own twists on interaction, animation and UI. Just to give it a unique spin.
Thank you for your time!
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!
So, this is the first time I've ever used CSS grid on my own. It may not be my best work when I submit this. Are there better practices that I could have implemented on the grid? Also, I have a feeling when I submit this, it's going to be too large. If thats the case, how should I set the size of this grid?
Hello there!
You really do have a great grasp with grid, for your first attempt. Much better than I did!
However, regarding your question:
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);
The only issue I am facing is there is a little stuttering in desktop design when I hover on the small images of the product. The div next to it tries to adjust its height(increasing height which is causing stuttering). I first thought it maybe issue because of flex but not able to properly find out the main reason. So if anyone can help with this!
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:
Hope that helps!
Updated solution... For now now no questions but all feedback is welcome.
Hiya Martijn!
You can add a z-index:1 to .primary-btn. Then add z-index: -1 to your after class.
With a z-index and relative parent, the z-index:1 will act as a new scope, for the z-index:-1 (rather than the -1 sending it behind your page, it will send it behind the primary-btn) I hope this makes sense :)
How do you center the text next to the logos? I added some padding to the top to fake it, but I want to know how to actually center the text vertically. vertical-align: middle; and vertical-align: center; don't seem to work.
Hello!
I would go for a display flex approach, rather than floats.
This should centre them up nicely.
Been a while since my last submission so thought I'd start with this new one.
Can someone please explain why my .imageContainer class has a height of 306px which causes the extension at the bottom when hovering over the image? As far as I'm aware the height of this div should be that of its contents? The largest element inside this div is the image, so why is there this extension at the bottom?
Heya Chris,
Add: .imageContainer .mainImage{display:block;} to your css, and this should fix your issue :)
Images are display inline by default, so it always causes some weirdness with vertical spacing, as the box model doesn't tend to support top/bottom with inline elements.
I still struggle on centering my entire content even when I make a container and use grid on it
what am I doing wrong?
Hello Walid!
UPDATE: RESOLVED! SOLUTION:
/used hsla instead of hsl in order to add initial opacity/
Hello! At it with my second challenge and I admit, the overlay effect on hover was challenging. As you can see I couldn't make the View icon at opacity 1 and it pulled the value from the opacity of the overlay:hover. Any thoughts and advices about this? Same goes with putting a text instead of the icon
Additional feedback on how I can make my code cleaner is highly appreciated! :)
Hello Adina! First off, great work with this, I think you have handled the spacing very well. Looking great.
Regarding your question, here is how I would handle the eye hover.
This should centre the eye, but also give you a transparent background. Apologies, I do not know what the exact colours are from the design, so I just guessed. You may be able to get it closer.
The issue you were having is due to that opacity is inherited by all children, whereas rgba is not inherited by children.
Also I notice on your ".overlay" class, you have: transform: 0.3s ease; This should be: transition: 0.3s ease; That should get your animation working.
This is all I have, but again good job!
Still a bit iffy about Tailwind customisation, so decided to dive in with a real design.
I seem to spend longer fighting Tailwind to get precise dimensions to match the designs, than I would just writing basic scss. Any advice is appreciated.
Excellent points there, thank you so much for the time and detail. I will bear all these in mind for the future.
