Skip to content
OverviewSolutions
5
Comments
15

Ukaegbu Gray Nneji

@graynneji220 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Ukaegbu Gray Nneji•220
    @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
  • Ukaegbu Gray Nneji•220
    @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 helpful
    1
  • Ukaegbu Gray Nneji•220
    @graynnejiPosted almost 2 years ago

    Alright thanks... its actually this challenge I need help for. here is the link you requested for https://github.com/graynneji/audio-ecommerce-app

    0
  • Ukaegbu Gray Nneji•220
    @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 helpful
    1
  • Ukaegbu Gray Nneji•220
    @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 helpful
    1
  • Ukaegbu Gray Nneji•220
    @graynnejiPosted almost 2 years ago

    I 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
View more comments