Looking to hire developers?
@Deevyn9
@AhmedAlkh
Submitted
I was unable to make the image div and the information div the same size so there is a slight difference at the bottom where they should be flush. I would appreciate any help in fixing this issue along with any others that are spotted. Any feedback is appreciated, thanks in advance!
Edit: Changes from feedback have been implemented.
@Deevyn9
Posted
Hi Ahmed, great solution you have here, it looks really great. However, you'll need to change the width for the media query to about 600px so it'll be more responsive.
Happy Coding! 🎉
@abelgmz
Submitted
The project was good to practice my flexbox skills. The overlay effect over the image was the obstacle. I made a research and I found a solution, but I would like to know if there is a better way to do this effect.
Any feedback is welcome, thanks :)
@Deevyn9
Posted
Hi Abelardo, congrats on completing this project, your solution looks really good, however, you'll need to use max-width instead of width to make the container more responsive for smaller screens, you'll also need to add paddings to the left and right of the body to give it a bit of space from the container when it goes below the specified max-width.
I hope this is helpful to you.
Happy Coding!🎉
@Feelshot
Submitted
I have done the exercise again, taking into account variables such as the use of sass and best practices in html.
@Deevyn9
Posted
Hi Dani, congrats on completing this project, your solution looks really good, however, you'll need to use max-width instead of width to make the container more responsive for smaller screens, you'll also need to add paddings to the left and right of the body to give it a bit of space from the container when it goes below the specified max-width.
I hope this is helpful to you.
Happy Coding!🎉
Marked as helpful
@YouLackHope
Submitted
Hey there everyone! i've learned new ways of centering projects and cleaner ways of writing code :)
@Deevyn9
Posted
Hi, congrats on completing this solution, Your solution really looks great and responsive. However, you'll need to add left and right padding to the body so there would be a bit of spacing between the container and the body when it goes below 320px. 10px of padding should be enough.
Happy Coding!
Marked as helpful
@isamardzija
Submitted
@Deevyn9
Posted
Hi, congrats on completing this project, your solution looks really great. However, I found a few issues that would need resolving:
(i) You'll need to add background-repeat: no-repeat; to the body to prevent the gradient from repeating.
(ii) You'll need to add a min-height: 100vh to the body and display: grid place-items: center; to center the container.
I hope you find these helpful.
Happy Coding! 🎉
@brian-maker
Submitted
should i set the height for the whole card or i can set the height for each and every small card while in mobile format
@Deevyn9
Posted
Hi Brian, there's and issue with the github pages and the site isn't loading.
Marked as helpful
@bociKond
Submitted
I found it hard to put color over an image and I am unsure about the responsiveness of the card.
@Deevyn9
Posted
Hi Bocikond, congrats on completing this solution, your solution looks really great, about the responsiveness, you did pretty good, However, you'll want to make the container take a column flex direction from 850px because that is the width where the image begins to shrink.
I hope you find this helpful.
Happy Coding! 🎉
Marked as helpful
@jbidz
Submitted
Any feedback is appreciated
@Deevyn9
Posted
Hi John, congrats on completing this project, it looks really good. However, the container isn't responsive for screens below 340px, try changing the width to max-width and adding left and right padding to the body so it can look great on smaller screens> Also, you'll need to swap the hover and active colors on the radio buttons.
I hope you find this helpful.
Happy Coding! 🎉
Marked as helpful
@reymartvigo
Submitted
Hi, this is my solution to Product Preview Component.
This is my first time using React JS.Feel free to give feedbacks and suggestions on how I can improve are very welcome!.
@Deevyn9
Posted
Hi Reymart, congrats on completing this project, your solution looks really great. However, on the mobile view, the container isn't centered, you can solve this using body {display: grid; place-items: center;}
I hope you find this helpful.
happy coding! 🎉
Marked as helpful
@yishak621
Submitted
Even if these type of E-commerce projects are done with frameworks to make life easier but i challenge myself to the extreme building the components by pure vanilla JS . the method that i use to make the whole project is using constructor functions as a component of JS since they will build the a whole functionality after i envoke(call) it for any place i want .. the components that i build with constructor function (located in module folder)
1.Modal(pc version only modal.js)
2.prev and next(mobile version constructorMob.js)
3.addToCart(card.js)
4.counter(counter.js)
other components that help to build the project
1.array.js(host files locally to store images)
2.checkout.js(fetch data for countries select input API)
3.darkmode.js(for toggle darkmode )
4.fixedNavBar.js(for toggle navbar fixed class scroll event)
5.localstorage.js(i will design these soon)
i also added cool features like
*page_loading_GIF
*collection_cards_feature
*Night_mode
*checkout_page.
for the checkout page in the country select input i use *API to load countries and add them in to our select input.....if u see some bugs please correct me(except the notification **bug after the item deleted i will fix that after completing the local storage function when i got time to do that) and also if u see something **new ask me
@Deevyn9
Posted
Hi Yishak, congrats on completing this project, your solution looks really great, your innovations too are awesome. However, I found a little thing you'll need to fix, you'll need to adjust the "add to cart" function so it doesn't add an item if the number chosen is less than 1.
I hope you find this helpful.
Happy Coding! 🎉
Marked as helpful
@mikhaelholden001
Submitted
Thanks to the community for the feeds back provided.
@Deevyn9
Posted
Hi Mikhael, congrats on completing this solution, your solution looks really great. You'll want to remove the scroll whenever you toggle the navbar on mobile, you can do this by adding an overflow of hidden on opening the navbar and removing the hidden overflow on closing the navbar.
I hope you find this really helpful.
Happy coding!
Marked as helpful
@Vinzz34
Submitted
Any Feedback would be appreciated. I found difficulty in positioning all the different images. And also getting the height of the answers. I was not able to figure out how to use the picture tag for the illustration where i should've used the picture tag.
@Deevyn9
Posted
Hi Vinzz, congrats on completing this project, it looks really great. I noticed you gave the main container a max-width of 60rem, which looks really great. However, when the width of the screen is reduced to 330px, it begins to overflow, you can add left and right paddings of around 10px to curb this issue on screens of smaller width.
Hope you find this helpful.
Happy Coding! 🎉
Marked as helpful
@AK-CHP1
Submitted
I couldn't provide the correct box shadow to the main card and the button. Please help me figuring out.
Also, I am confused about the typography. The style-guide.md says the paragraph should be 16px but that almost never works, it looks too big. My screen resolution is 1024x768. I have to set it back to 11.3px. Also the letter spacing and word spacing displayed in the design files is quite less. And I couldn't adjust my design according to that.
@Deevyn9
Posted
Hi Aayush, congrats on completing this project, it looks really great. Although the card overflows on screens below 320px, I saw that you gave it a min-width and width of 320px, try making use of max-width instead and give the body some left and right padding so there's a bit of separation between the card and the body.
Hope you find this helpful.
Happy Coding! 🎉
Marked as helpful
@altacis1
Submitted
. The difficult part of the project was that the grid-areas was not working for some reason, tho i have a theory that it is about the child thingy stuff.
. I am unsure of the font and the color hehe
. Would it be optimal to keep nesting div? *especially like 5 divs
@Deevyn9
Posted
Hi Altacis, congrats on completing this project, it looks wonderful. However, here as some key takeaways you can work on to make it better:
Firstly about the color, for the background you're to use hsl(210, 46%, 95%) instead of hsl(0, 0%, 81%)
Also, the container isn't centralized on vertically, to make it centered, you should add display: grid; and place-items: center; to the body tag.
I hope this comment helps you achieve what you want.
Happy Coding! 🎉
Marked as helpful
@Lukasz-Milde
Submitted
Well... this is not the most elegant way to solve this challenge. I am open to criticism so feel free to point out downfalls and share your ideas on how to fix them. Lukasz :)
@Deevyn9
Posted
Hi Lukasz, congrats on completing this project, you did great to implement the design beautifully.
However, the error message and image that appears when an invalid email is typed doesn't disappear when a valid email is typed. Look into solving this issue.
Happy Coding!
Marked as helpful
@NatnaelDemelash
Submitted
I always find the media query(making responsive) part difficult.
@Deevyn9
Posted
Hi Natnael, congrats on completing this project, your solution looks really great.
About the issue you say you have with media queries, have a look at this documentation, It should make you understand media queries more. Good luck.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Happy Coding!
Marked as helpful
@VMH1225
Submitted
how can i learn more about svg's? I had a lot of trouble implementing them in my html so I just placed them in my css as background images because it was easier to control their size and position that way.
@Deevyn9
Posted
Hi, congrats on completing this solution, it looks really neat. However, I found thing you can work on to make it better.
Give the main container a max-width and give the body left and right padding so that when the screen's width is reduced, it wouldn't overflow to the sides.
I hope you find this helpful and you are able to implement this.
Happy Coding! 🎉
@Saravana16041999
Submitted
while working on this project it was hard to align the ever thing in order for mobile view. and there are some mistakes in mobile view it might be good on 320px not on 425px . first time used onclick event in this project and used event listener "change" in custom option . custom is created using the input element. and claculation might be different i did based on my knowledge.
@Deevyn9
Posted
Hi Saravana, congrats on completing this project, your solution looks really great. Although I found the following issues:
body { display: grid; place-items: center; }If you have issues trying to fix these issues, you can use my solution
I hope you find this helpful.
Happy Coding! 🎉
Marked as helpful
@ClaireKarsenti
Submitted
Hello there,
This is my #8 challenge 🎉 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊
I choose to do this project in TypeScript language and with the framework React to deepen my skills in these fields. This challenge also allowed me to deepen my knowledge of CSS for the layout part of this project.
Here are some example of my customization I added to this project:
⏯️ I decided to add a button to control the start of the countdown. This button can also pause the countdown. 🔄 I also added a reset button. This button is available only when the countdown is running.
Thank you for reviewing my code, I am happy to hear any suggestions! 🙏
Claire
@Deevyn9
Posted
Hi Claire, congrats on completing this project, it looks really great, I like your innovation to add the start and reset buttons. However, I noticed that from around 360px, the cards begin to overflow horizontally. look into making it responsive for screens of smaller width.
I hope you find this helpful and you're able to make it more responsive.
Happy Coding! 🎉
Marked as helpful
@RodrigoBC4
Submitted
Como é o segundo desafio que pego, achei complicado entender a funcionalidade, tive que consultar varias vezes explicações e tutorias para tirar duvida no JS. Acho que ainda estou aprendendo quais seriam as melhores praticas.
@Deevyn9
Posted
Hi Rodrigo, congrats on completing this project, it looks and works really good. I noticed you used the hover background color as the original background color on the radio buttons. Try to swap it out.
Happy coding! 🎉
Marked as helpful
@Peteksi95
Submitted
This was my first Frontend Mentor project with JS involving so im very eager to hear what to do better and more efficiently on that but as always all feedback is greatly appreciated, thank you!
@Deevyn9
Posted
Hi Petri, Congrats on completing this project, all the functionalities are working perfectly. However, you'll want to have a look at the media query, from 376px and above have a max-width of 30%, this is making the container too slim and the elements are overflowing on certain screen sizes. Try using a more responsive width or work with more media queries to make the container more responsive.
I hope you find this helpful.
Happy coding! 🎉
Marked as helpful
@Hiya-Jakhar
Submitted
@Deevyn9
Posted
Hi Hiya, congrats on completing this solution, it looks really neat. However, I found thing you can work on to make it better.
Give the main container a max-width and give the body padding so that when the screen's width is reduced, it wouldn't overflow to the sides.
I hope you find this helpful and you are able to implement this.
Happy Coding! 🎉
@atif-dev
Submitted
Hi, It was really fun to complete this little challenge. The challenging part was responsiveness. Any type of feedback, suggestions, or improvements from your end? Thanks!😇
@Deevyn9
Posted
Hi Atif, congrats on completing this solution, it looks really neat, I found something that'll make it better!:
Give the main container a max-width and give the body padding so that when the screen's width is reduced, it wouldn't overflow to the sides.
I hope you find this helpful and you are able to implement this.
Happy Coding! 🎉
@Abdullahi-abdiaziz
Submitted
Solution for Responsive order summary component
@Deevyn9
Posted
Hi Abdullahi, congrats on completing this project, your solution is very neat. I found some little issues that need fixing:
I hope you find these comment helpful.
Happy Coding!
Marked as helpful
