Mombinya Omboga Shem• 170
@MombinyaOmboga
Submitted
I found positioning my image correctly a bit tricky as that was the purpose of taking the challenge, learning CSS positioning.
P
Haydn Kerr
@haydnkerr
All comments
- PHaydn Kerr• 535
@haydnkerr
Posted
Nice final design! Since the design calls for a card to be placed directly in the middle of the viewport a good way to do this one is to skip the .img-container and do all the positioning in the body tag. body { display: flex; justify-content: center; align-items: center; height: 100svh; width: 100% }
this will place the QR card directly in the middle without having to do any further positioning on the .img-holder class
Happy Coding!
0 - Mcnafaha• 240
@TheMcnafaha
Submitted
How does the dragging behavior feel?
PHaydn Kerr• 535@haydnkerr
Posted
Just so you're aware the preview site doesn't load properly to see the site
0 - PHaydn Kerr• 535
@haydnkerr
Submitted
Had a go at trying Accordion Menu with no JS using details and summary HTML, the biggest issue I had was with the summary::after icon clipping on mobile screen size, this is something I need to look at a bit more and figure out why it is happening.
PHaydn Kerr• 535@haydnkerr
Posted
For tutorials on some of these challenges check out my channel
https://www.youtube.com/channel/UCpFe7-ADQpEgjnGJnQei8dA
0 - İsmail ÇELEN• 10
@IsmailCLN
Submitted
In this project, i try to manage responsive design but i couldn't. I will study about this topic. I would love to see any feedback about this.
PHaydn Kerr• 535@haydnkerr
Posted
Firstly you overall design is great and very close to the design file. the biggest problem I see you have is the width of the container changing with smaller screen sizes. Luckily for this challenge there is no need for a responsive design so I suggest changing the width of the main container to 100% and adding a max-width so it doesn't take up the whole page.
Additionally if you want to use Margin: auto on the container I would add margin: 0 auto then add 100% height and width for the body so the container will sit in the center of the page
happy coding
Marked as helpful
1 @Diego-CastilloF
Submitted
How should I cut the left part of the image?
PHaydn Kerr• 535@haydnkerr
Posted
Nice design! in terms of cutting off the left side of the image you could use "Transform: translate(-50px)" in CSS. Just replace the pixels with whatever works for you. It won't effect the whole container just the positioning of the image
Marked as helpful
0- zawseng13• 80
@zawseng13
Submitted
All feedback are warmly welcome :3
PHaydn Kerr• 535@haydnkerr
Posted
Nice design! your code is well structured, readable and the final design is very similar to the example.
One thing I did notice was the black border around the card that doesn't follow the border-radius. I suggest using "border: 1px solid black" instead of "outline" for the card. This will allow the border to follow the radius and not have that rectangle box.
***it seems the outline works on chrome browser. if you have a look on safari you will see what I'm talking about
0 - Vanitas• 30
@LucasLC174
Submitted
The image was difficult for me, I didn't know how to change it using the media and why sometimes it didn't come out.
PHaydn Kerr• 535@haydnkerr
Posted
Nice design! Just a few minor things that could be changed to complete this challenge.
Have you thought about responsiveness? I noticed on smaller screens the container doesn't switch to a column. This could be an easy fix with a media query.
Additionally you have the correct font for the price however that same font isn't used for the main heading
0 - Aliseth• 155
@charlottesaidi
Submitted
Tried a live clock, don't hesitate to tell if it's buggy or if the time doesn't match where you are (I got the French time here, which is right of course but there's no "zero risk"...). Thank you ;)
PHaydn Kerr• 535@haydnkerr
Posted
time looks fine over here in the US :)
1 - Dan• 90
@gawnad
Submitted
Hello fellow coders, Just completed another project. Love this site as it gives me hands on experience with the code as I'm sure we have all been on an online course and feel like we have learnt so much till it comes to building a site yourself and end up stuck. Please feel free to comment on how my code looks and anything that would be a better practice for me as I'm willing to learn and giving it 110%
Thank you in advance.
PHaydn Kerr• 535@haydnkerr
Posted
not sure what's happening but the site you linked is different from the challenge
0 - Krista Calleja• 300
@KristaCalleja
Submitted
So proud of my JS file! Really enjoyed doing this back-end. For some reason whenever I try to load the image on the background (in "Boost your links today") it messes up the page. The circles above the boxes were a hassle in desktop mode. Accepting feedback as I am looking for a professional position. Thank you.
PHaydn Kerr• 535@haydnkerr
Posted
Nice work! One thing I can suggest is with the advanced statistics cards you can offset each one vertically by using transform: translateY(__%). in the CSS.
This will give it that staggered look :)
0
