Hi, finally I done working on another fun challenge here. The result is quite great but not perfect for me. I'm not quite sure that the share popup part is already good enough or need some changes. So, any feedback would be really appreciated to help me grow. Thank you 😀
Hey, that's allrady looking good. Just a small side tip: If you give your social icon images a "display: block" they will align up nicer. ;) You can also include the SVG instead of linking them in the IMG tag.
This was really a challenging challenge for me and my most difficult Css project yet. I had to revisit css3 flexbox, checked for online projects similar to this one to have an idea of how I would go about it. It was a real stretch for me, but I am glad I completed it. I would appreciate Feedbacks and reviews as regards my solution. The layout is still responsive at 295px. Is there a way one could have gone with this using grid? And is there some codes that can be refactored?
What i am missing, are the different states on your buttons and links. ;) If you add these, that would improve the project with not much effort. From scanning over your code i have to say, it looks clean and organized, what can help when projects grow.
My first challenge! New to frontend dev and excited to be learning new skills everyday.
The only thing I couldn't resolve was how to integrate the images pattern in the mobile view. The problem I had was that when I switched to mobile view, the card component didn't get centered. I worked around this problem by none displaying the patterns in mobile view.
Any clues in why I'm getting this issue?
Thanks in advance!
On my desktop the card is also not centered. My suggestion would be to give the body a min-height of 100vh and display flex. Then you can center it with justify-content and align-items.
The top and bottom background images could then be set using ::before and ::after. You could the remove the two divs "top" and "bottom".
I would also suggest not using position: absolute on your card plus you don't need it when you center it with flexbox (like mentioned above).
You could add the following styles to your body:
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
On you card class remove:
position: absolute;
top:...
left:..
transform:..
and add
position: relative;
That will fix your problem with the card header image. And if you have removed the two divs with the background images, all should look nice and centered.
From there you should get it done with ::before and ::after on the background images. Let me know if you have problems.
Me or someone else will probably help you out (or in slack).
i do all i can, and i am happy with my skill for now.
i have problem to posisionate de 'age' at the right, the problem is if the 'name' is too large, the 'name' is over of the 'age'.
i try using margin-left and position relative. but, nothing.
Don't give up! Here are a few suggestions from my side of view:
Try improve the layout in general to get it looking more like the design. You don't have to get it pixel perfect but just try to get it as close to the design as you can. I think this will teach you allot and you can improve your skills.
Overthink your choose of HTML tags. Maybe this link will help you: https://developer.mozilla.org/en-US/docs/Glossary/Semantics Like the h1 tag is your overall heading. Then you use h4 for the age and country. This is not what they are for. ;)
For you problem with the name, age and country - i would overthink the way you did it. As an idea, maybe put it inside of a div and do the adjustments with flex or grid.
If you try these steps and still have problems, someone else or me will probably give you some advise in the slack channel or here. ;)
Q: How to get progress colour change for the range slider working in Chrome? I couldn't seem to find a pure CSS solution.
Ramon already gave you a good solution for it. Another way you "could" do it, would be with a linear-gradient as a background. That is how i did it but I guess eatherway works.
I would greatly appreciate it if I can get some feedback on the code I've written. Please point out what I've done wrong so I can learn and continue growing as a developer. thanks!!
This one looks good but i would have a few small improvements from just looking over it fast.
I would change the height of 100vh on the body to min-height because if i look at it on my phone in landscape it gets cuts off.
I would set the two big background images with ::before and ::after inside on the .container and include the SVG.
Maybe give the card a little space on mobile. On a with of 320px its a little tight. ;)
But that might just be my opinion.
As a small improvement, but big difference for the UX i would change your range input. If you set the min to 1 and the max to 5 you give the user only these 5 "packages". In your JS you just update your case switch to fit and you have a fast but big UX improvement.
And your discount price drops from 16 to 4$. I think that is more than 25% ;)
Feel free to give your valuable feedback, So that I can improve.
If you want to improve it, i would start by overworking the colors and paddings/margins. If you get it closer to the design provided, it will really make a difference. ;)
But other then that it is a real good start and i would just try on getting closer to the design. After that you could work on the functions with JavaScript but first i would focus on the layout.
Hi, did you try to only use:
@media screen and (max-device-width: 480px) {}
