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.
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! 🎉
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 :)
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!🎉
I have done the exercise again, taking into account variables such as the use of sass and best practices in html.
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!🎉
Hey there everyone! i've learned new ways of centering projects and cleaner ways of writing code :)
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!
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! 🎉
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
Hi Brian, there's and issue with the github pages and the site isn't loading.
I found it hard to put color over an image and I am unsure about the responsiveness of the card.
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! 🎉
Any feedback is appreciated
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! 🎉
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!.
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! 🎉
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
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! 🎉
Thanks to the community for the feeds back provided.
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!
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.
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! 🎉
