Latest solutions
Latest comments
- @Gwen-legoSubmitted almost 2 years ago@graynnejiPosted almost 2 years ago
You are almost there... Remove this max-width: 37em; from the wrapper class in your CSS and also remove media="(max-width: 33em) from your source tag in your HTML. Now when you load the page and reduce the size of your browser to like phone size. you will see the responsiveness it will be only one column. I have done it here and it works fine. try it out and let me know the result.
0 - P@cotybroSubmitted almost 2 years ago@graynnejiPosted almost 2 years ago
Congratulations on completing this challenge When working with images in a web application, there are different ways to load them into your project. One way is to import individual images one by one, which can be time-consuming and cumbersome, especially when dealing with a large number of images. Alternatively, you can import the entire image folder or use the require function, which can simplify the process and make it more efficient.
Importing the entire image folder involves specifying the path to the folder containing all the images, and then accessing each image as needed. This approach can be useful when you have a large number of images, as it allows you to access them all at once without having to import them individually.
// Import all images in a folder const images = require.context('./images', true); // Access a specific image const myImage = images('./my-image.jpg');
Marked as helpful1 - @arfarobsSubmitted almost 2 years ago
Audiophile | React | Firebase | Jest | ReactTestingLibrary | ReduxTool
#firebase#jest#react-testing-library#redux-toolkit#react@graynnejiPosted almost 2 years agoAlright thanks... its actually this challenge I need help for. here is the link you requested for https://github.com/graynneji/audio-ecommerce-app
0 - @xdcronSubmitted almost 2 years ago@graynnejiPosted almost 2 years ago
Another simple way to make it responsive without using media query.. Lets say you use grid for the main-container
.category-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); place-items: center text-align: center; }
Grid columns breaks after hitting 20rem of width. I hope this helps you in your future projects.
Marked as helpful1 - @NehalSahu8055Submitted almost 2 years ago@graynnejiPosted almost 2 years ago
Congratulations Some suggestions. To optimize your code and make it more readable you should use one for loop and you will still get the same result.
Marked as helpful1 - @arfarobsSubmitted almost 2 years ago
Audiophile | React | Firebase | Jest | ReactTestingLibrary | ReduxTool
#firebase#jest#react-testing-library#redux-toolkit#react@graynnejiPosted almost 2 years agoI have been trying to display my images in the asset folder but I keep getting Module not found, the only way I was able to load my images in my react app is when I upload those images in a server and I use the URL but when I want to load them locally I get that error except i import the image and I cannot import all images in all my components
0