Looking to hire developers?
@BenjaDotMin
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!
@BenjaDotMin
Posted
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
Submitted
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
@BenjaDotMin
Posted
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!
Marked as helpful
@strosi
Submitted
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.
@BenjaDotMin
Posted
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 :)
Marked as helpful
@BenjaDotMin
Submitted
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!
@BenjaDotMin
Posted
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
Submitted
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?
@BenjaDotMin
Posted
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);
Marked as helpful
@imparassharma
Submitted
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!
@BenjaDotMin
Posted
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!
Marked as helpful
@skorpioo
Submitted
Updated solution... For now now no questions but all feedback is welcome.
@BenjaDotMin
Posted
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 :)
@purplejragon
Submitted
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.
@BenjaDotMin
Posted
Hello!
I would go for a display flex approach, rather than floats.
This should centre them up nicely.
Marked as helpful
@Chris94Lee
Submitted
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?
@BenjaDotMin
Posted
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.
Marked as helpful
@wella4life
Submitted
I still struggle on centering my entire content even when I make a container and use grid on it
what am I doing wrong?
@BenjaDotMin
Posted
Hello Walid!
Marked as helpful
@adinabbb
Submitted
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! :)
@BenjaDotMin
Posted
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!
Marked as helpful
@BenjaDotMin
Submitted
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.
@BenjaDotMin
Posted
Excellent points there, thank you so much for the time and detail. I will bear all these in mind for the future.
@quocbao19982009
Submitted
Hi, thanks for taking your time to look at this challenge. I am practicing CSS and HTML as a newbie and hoping to get some feedback from our fellow web designers. In this challenge, I found a few questions to mind:
@BenjaDotMin
Posted
Hello! Apologies, I am not experienced enough to answer your second question, but I can give insight into your first question.
When it comes to flexbox and grid (especially grid) I would move away from percentages, and in some cases pixels too. If you examine the width of each car section, you will see they are very slightly different widths, because % is not super accurate in this case. However, if you remove your min-widths, and change your car sections (.sedans, .suvs, .luxury) each to flex:1; then that will make them all perfectly even width, and be repsonsive.
If you wanted differing widths, you could set one of the car sections to flex:1.2; for example (but not needed in this design). Flex works out the width relative to each other, in the given parent. So flex:2, would be twice the size of an item with flex:1, etc.
If you want to get into using Grid, I would also recommend using "fr", due to %'s wont work correctly along side the gap rule. Sorry if this is longwinded, I just wanted to give better options than %, or static pixels.
Also, just as a side, if you really want to use %'s, to get more accurate widths, you would need to used something like 33.333%, which really is not pretty and will give you very specific widths like 399.999px wide due to the missing .111%. Where as flex and fr will be perfect.
@Fenroe
Submitted
Focused on the fundamentals with this one. Anyone have any tips for adjusting the size of container child elements so that the desktop version doesn't look so empty?
@BenjaDotMin
Posted
Hiya David, great work here.
Regarding your question: I would put on your body tag: display: flex; align-items: center; justify-content: center; height: 100vh;
Then on your main tag: max-width: 920px; and remove the margin rules you have for desktop and mobile.
Then on your footer tag: position:fixed; bottom: 40px... or so.
That should centre things up nicely!
@rvcequina
Submitted
this challenge was fun. it helped my utilize the nth child selector of css and understand more about media query!
@BenjaDotMin
Posted
First of all, great work! But one small tip about the button hover state. Set your button border to 2px white (remove the hovered border), then in your hover state, just set the background of the button to transparent... that way the button will not jump slightly when hovered, as the border never changes :)
Hope that's helpful!
