Lawrence Caudle• 100
@ltc870
Submitted
Hey you all! I've completed another project. Please tell me what you all think, I would really love your advice! Thanks!!
Phúc (Scott) Nguyễn
@NationsAnarchy
All comments
- Phúc (Scott) Nguyễn• 430
@NationsAnarchy
Posted
Everything looks and functions great Lawrence, well done! I guess the only thing we can do to match the design is to perfectly center the card to the screen :D
0 - p-rod• 190
@py-rod
Submitted
Some recommended page to download icons free? :)
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
You can try Font Awesome - it's a very popular website for using and hosting a font library so you can use with your own projects :D
https://fontawesome.com/
Marked as helpful
1 - udinjelek• 10
@udinjelek
Submitted
I still don't know the best practice convert from web to mobile, especially breakdown div from this case
in web view
<div class='containerFlex'> <div class='containerA leftSide'> <div class='title'></div> <div class='article'></div> </div> <div class='containerB rightSide'> <div class='photo'></div> </div> </div>in mobile view
<div class='container viewFromTopToDown'> <div class='title'></div> <div class='photo'></div> /*see photo are in mid!!! */ <div class='article'></div> </div>/* ------------------------------------- */ so my solution are:
<div class='containerFlex'> <div class='containerA'> <div class='title'></div> <div class='photo mobileMode'></div> <div class='article'></div> </div> <div class='containerB'> <div class='photo webMode'></div> </div> </div>/* ------------------------------------- */ so the css are:
.mobileMode{ display:none; } .webeMode{ display:block; } @media { .webMode{ display:none; } .mobileeMode{ display:block; } }/* ------------------------------------- */ but again, I don't think thats the right answer since I'm newbie and none of my friend are web programer
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Hey there Udin, good job showing your solution here on the website!
If you want to have a different layout for a smaller width, you can use the CSS media query properties: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Please have a look at that article, it should give you the idea on how to align/size elements properly with different screen widths. Do let us know what else we can help you with as well, and happy coding!
0 - T0R0• 280
@XxtbmfxX
Submitted
I don't know how to do the escalated thing in the stars and the reviews ☹ everything else is ok i think Any feedback is welcome UwU.
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Good job with the solution, Alexis!
If you want those star ratings/review cards to be escalated like the design - you can use the CSS Grid system, where you can align elements within a grid/table system, that way you can have them align accordingly :D
https://www.w3schools.com/css/css_grid.asp
Feel free to play around it - and let us know what else we can help you as well. Happy coding!
1 @mouhibeddine
Submitted
Any suggestions on how I can improve are welcome!
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Well done on completing the challenge, Mouhib!
I believe that the next step we can do with this one is to implement responsive designs once the website shifts the layout to smaller screen width.
You can have a look at the
@mediaquery CSS properties and start working from there: https://www.w3schools.com/css/css_rwd_mediaqueries.aspLet us know what else we can help you with, and have fun coding!
Marked as helpful
0- Joanna Lee• 140
@doleetos
Submitted
Can someone help with the awkward animation on page load at first..? I'm having major difficulty figuring that out. I don't want the animation to run on page load.
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
I believe that awkward animation you were referring to is actually the webpage's elements loading - so I don't think it can be changed/fixed from the code we write.
Otherwise, this is an excellent solution - so well done for completing it!
1 - SylpX• 10
@sylpx
Submitted
I find it difficult to implement it on a responsive website, I also think the code that i'm not sure about is at "@media-querry", for the question i don't think it exists, everything is clear, thanks for the challenge
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Hey there, Sylpx! Great job for finishing the challenge and submitting it here on the website!
For the
@mediaquery properties that you are wondering about, please refer to this page:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Once you've seen it, please give it a try and see if you can get the solution working correctly for you!
Please do let us know what else we can help you with too, and happy coding!
0 - Joan Martins• 10
@joanofstuff
Submitted
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Not really sure what you mean with the feedback section Joan - the card looks perfect to me. So can you be a bit more specific with that?
Good job, by the way - I love seeing simple solutions using modern tools and frameworks :D
1 - Brendon Van• 10
@brendonvan
Submitted
What would be a better way to make the HTML and CSS more interactive? What can I learn to improve at? Thank you!
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Hey Brandon! Congrats for submitting a solution here on frontendmentor.io
I would say the easiest thing we can do is to add a
transitioneffect + a different state when we hover for the "Add to cart" button.Plus, please have a look at responsive design by using the
@mediaquery as well! That way we can shift the card's layout when the screen reaches a smaller width :DHave fun coding, and please let us know what else we can help you with!
0 - Dženita• 70
@dzenitaa96
Submitted
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Well done, Dženita! Congratulations on your very first solution submitted here on frontendmentor.io!
I feel like everything is good so far with the desktop layout - which is a very good start.
The next step we can think about is to shift the card design into a different layout like the design file has shown. Feel free to have a look at this link for the specific CSS properties that can help us with doing so, and try to implement it by yourself.
Let us know what else we can help you with, and most importantly - happy coding!
0 - Filip• 110
@fica25
Submitted
It was a little hard to center a image into a div and take the other side of the main section but I managed this at the end. Any tips to center a img into a div and take a full space , except my example.? And can someone answer how I can adjust length of paragraph , that is, determine where my words stand? Also I know that there is a small error in paragraph, but I made it as close as I could like original.
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Hi Filip! Good job on the solution :D
Personally for this challenge, I used the CSS properties called
max-widthto adjust how all of the texts would spread out/go down.Let me know if that helps you out, and as always - happy coding!
0 - OpiniIsaac• 60
@OpiniIsaac
Submitted
failed to get the font family and weights rights plus the image in the mobile screen
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Hey OpiniIsaac! Congrats on submitting a solution here on frontendmentor.io!
Here's the article that I can show you on how to use Google Fonts
Let me know if this helps you, and happy coding!
0 - Bryan• 130
@MamieNorris
Submitted
Hey guys,
I've only done the desktop version of the mokup. I didn't really think about the responsivity when I set up the project. So, since all my heights and widths are fixed values it's screws everything up. I'll comeback later to fix it.
I had a tiny issue concerning the image. Oddly, the main container a tiny bit too large on the image' side and I don't know why. I had to shrink the whole container as I wasn't able to make the image fit. Moreover, I used the filter property to turn the image purple (the original is black&white) but I'm not sure if it was the right solution since the color doesn't match the reference.
Thanks for stopping by !
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Great to see you posting your solution up here, Bryan! And welcome to the frontendmentor.io community as well!
For coloring the image, instead of using the
filterproperties, I can suggest you to use themix-blend-modewithopacity- that should be much easier to remember and to implement as well.Plus, the most important key of responsiveness for web pages is to set a dynamic width/height numbers, not fixed ones. You can try
max-widthandmax-heightinstead of straight on width/height, play around a bit and see if you can match the design better.Hope this helps, and happy coding!
1 - POTB• 330
@Peteonthebeat
Submitted
Difficult Challenging Part
Probably, the most difficult part was fine-tuning the the filter property's colour knob, opacity, brightness, and contrast so the image looks maximally close to the example; hopefully it really does.
Areas I'm Unsure of Maybe the <li> tags might look a bit better when the width is about 1024...
Questions about best Practices: I'd be happy to know whether the approach I took to colorise the image is a good practice. I find it somewhat more intuitive than using a <div class="overlay></div>, so I used it.
Regards!
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Hey Pete! Nice solution there, congrats on completing it.
Firstly - for your question: I personally feel like using an outside
divwith aclassnamed overlay is the best way we can tackle the image coloring part. If you want something closer to the design file, I can suggest you to look at the CSS properties namedmix-blend-mode(as someone else have suggested that to me before on my own solution) - which is much easier to remember and implement.Lastly, I did notice that we have a few imperfections when adjusting the screen width to test the responsiveness of the card. For example - when I line up my screen width to exactly 1440px, I can see that the image and the content card are misaligned - which is a bit unfortunate. It should be much better if you can use the browser's DevTools (F12 key) to test things out first, and make sure that we don't have any elements anomalys.
Give these ideas a try and let me know if that helps you out :D Cheers!
Marked as helpful
0 - Lit2l• 270
@Larbearto
Submitted
What did you find difficult while building the project? Which areas of your code are you unsure of?
- I had the most trouble with the switching between desktop and mobile images for different screen sizes. I got it working but I'm not sure it is optimal. Suggestion welcome!
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
I don't think the
Imagecomponent from NextJS supports something like switching images between different media query points though. Maybe you can use a normalimgHTML tag or thesourcetag instead?Nonetheless, great to see someone using a very modern front-end stack like Next + Tailwind to complete the challenge - well done!
1 - Baunsator• 130
@Baunsator
Submitted
My first challange. Idont know yet how to make mobile version.
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Hello Baunsator! Welcome to the frontendmentor.io community!
If you want to shift the card's layout when the browser screen's width hit a certain point, you can use this
@mediaCSS properties to do so- https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Once you are able to use it, I can suggest you to change the flex direction of the card content so it lines up in rows instead of columns.
I hope this helps you out, and happy coding!
Marked as helpful
0 - Petru Banceanu• 110
@Petru14
Submitted
The only problem with this challenge was setting the background-color for the image which is still not the same as the original one, I tried setting
mix-blend-mode:multiply@NationsAnarchy
Posted
Hi Petru! Great to see your solution here on frontendmentor.io!
Here's how I implement the
mix-blend-modeproperties on my own solution, see if it works for you.background-color: var(--accent); mix-blend-mode: multiply; opacity: .8;Another thing I can suggest to you, is that you can try to match the width of the image and the card content so they look close to the original design file included in the challenge!
Happy coding!
Marked as helpful
1 - Harsh Kumar• 1,390
@thisisharsh7
Submitted
While building the project I was confused in different CSS units and was also not able to make the text responsive using media queries.
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Hi there Harsh! Good job on submitting your solution here on frontendmentor.io
Here are some of the topics I've found for you to read about different CSS units:
- https://www.freecodecamp.org/news/css-unit-guide/
- https://www.w3schools.com/cssref/css_units.asp
If you have any questions, please don't hesitate and ask us right away - we are very happy to help you completing this project and future ones as well to improve your web development experience!
1 @Jbfresh
Submitted
Hello everyone I'm honored to write this after completing my project. please I'd love any option regaarding css positions, I had a little challenge dealing with that. Also if there's a better way to go about this project, I'd love to hear about it. Thank you all for your co-operation.
Semantic HTML5 markup ,CSS custom properties and Google fonts
#accessibility#editor-x#emotion#styled-components#firebasePhúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Hi there Abdul, and welcome to frontendmentor.io! (Sorry if I call your name wrong, please correct me if you need to).
Congratulations on submitting your solution. I can feel that there are definitely rooms for improvement here. So I'd like to submit a few things for you:
- You can center the text of the bold/h1 text of "Improving ..." just like what you did with the description text below it.
- Feel free to Google around how to center a div, so you can perfectly center the card in the middle of the browser's viewport/screen
- Please use the padding/margin properties to space out between the QR code and the text areas as well
Utilizing those 3 points should nail you closer to a matching design like the project is giving us.
Please let us know how we can help you any further, if possible. And Happy Coding!
Marked as helpful
1- Gabriel Silva• 10
@gabrielSilvaN
Submitted
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Well done, Gabriel! Great to see your very first solution up here - and a warm welcome to the frontendmentor.io community!
I can see that you have utilized the breakpoint nicely to change the card design from desktop to mobile state. However I have noticed that the product image is not showing up correctly when we hit the mobile card design, so I would suggest you to have a look at some of the specific CSS properties to style the product image properly again.
Let us know what else we can help you as well, and happy coding! :D
Marked as helpful
0 - ali• 540
@alishirani1384
Submitted
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Hey Ali! Great job using modern tools and libraries to complete this solution!
There's a small thing I noticed on the solution though - as when I adjust the width on my browser to exactly 768px, the product image is still a bit too tall. Maybe you can have a look at that and make sure you switched to the mobile product image instead? (it works fine below 768px by the way).
Hope this helps you :D
Marked as helpful
0 - Tushar• 30
@tushartom
Submitted
Need Feedback about the image. I am struggling to make the image look closer to the design
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
I love how you implemented the responsiveness of the card, Tushar! The font size changes when I adjust the width of my screen, which is very welcoming. I also want to implement that into my own solution soon to improve readability.
For the image (and the card content as well), I can suggest you use the
max-widthproperties that CSS has. That should make the card not spread too far out across the screen.Nonetheless, well done with the solution! Happy coding!
0 - Aziz Prabowo• 220
@azizp128
Submitted
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Nicely done, Aziz! And welcome to frontendmentor.io as well!
The solution is looking great, we're just missing a few things here: the active state/hover state (which you can see on the design folder when you download the project to work), and also to correctly center the whole card to the screen.
There are plenty of ways for you to do that perfect center on the screen - feel free to Google it out since I am fairly sure that it will be something that we do a lot here as well as in real-world.
Please let me and everyone know what else we can help you to make this solution better for you!
Happy coding!
Marked as helpful
0 - Mohd Gulam Ansari• 210
@gulamansari57181
Submitted
Challenges that I overcome :
- To add overlay color on image !! 2)To write appropriate media query !!
Tips: Always go for Mobile first approach .
Happy Coding !!!!!!!!!
Phúc (Scott) Nguyễn• 430@NationsAnarchy
Posted
Great job on the solution, Mohd!
For the overlay - I can suggest you to use these two css properties called
{mix-blend-mode: multiply;opacity: 0.8;}. I firstly saw this from a very active and skilled developer here, and I immediately used those properties for the image header :DGive that one a go and let me know how that looks for you.
Happy coding!
0
