Grid not displaying photos

So I am building a webpage with React, I would like to have a grid of photos included .
I have imported my photos, checked them in other places on my page to make sure they work and they work fine but they do not show up within the grid area? My load more icon which is inside the same grid shows up fine. what am I doing wrong here. Ive been stuck for hours! please help TIA

import React from 'react'

import styled from 'styled-components';

import loadmore from 'images/loadmore.png';

import salon1 from 'images/salon1.jpg';

import home from 'images/home.jpg';

function Portfolio() {

  return (

    <Section id = "portfolio">

      <div className = "grid">

        <div className = "child-one grid-box"></div>

        <div className = "child-two grid-box"></div>

        <div className = "child-three grid-box"></div>

        <div className = "child-four grid-box"></div>

        <div className = "child-five grid-box"></div>

        <div className = "child-six grid-box"></div>

        <div className = "child-seven grid-box"></div>

        <div className = "child-eight grid-box"></div>

        <div className = "child-nine grid-box"></div>

        <div className = "child-ten grid-box"></div>

        <div className = "child-eleven grid-box"></div>

     </div>

     <div className="portfolio-more">

       <span id='loadmore'> Load More</span>

       <img src={loadmore} alt= 'load more'/>

     </div>

    </Section>

  );

}

const Section = styled.section`

min-height: 100vh;

padding-bottom: 2rem;

background-color: var(--secondary-color);

 .grid {

   display: grid;

   grid-template-columns: repeat(4, 1fr);

   grid-template-areas:

   "one one two two"

   "one one three four"

   "five six seven seven"

   "eight six seven seven";

   .grid-box {

     height: 15rem;

     width: 100%;

     cursor: pointer;

     &:nth-of-type (1) {

       grid-area: one;

       background: url($home}) no-repeat right center;

       background-size: cover;

     }

     &:nth-of-type (2) {

      grid-area: two;

      background: url(${salon1}) no-repeat right center;

      background-size: cover;

    }

    &:nth-of-type (3) {

      grid-area: three;

      background: url(${salon1}) no-repeat right center;

      background-size: cover;

    }

    &:nth-of-type (4) {

      grid-area: four;

      background: url(${home}) no-repeat right center;

      background-size: cover;

    }

    &:nth-of-type (5) {

      grid-area: five;

      background: url(${home}) no-repeat right center;

      background-size: cover;

    }

    &:nth-of-type (6) {

      grid-area: six;

      background: url(${home}) no-repeat right center;

      background-size: cover;

    }

    &:nth-of-type (7) {

      grid-area: seven;

      background: url(${home}) no-repeat right center;

      background-size: cover;

    }

    &:nth-of-type (8) {

      grid-area: eight;

      background: url(${home}) no-repeat right center;

      background-size: cover;

    }

    &:nth-of-type (9) {

      grid-area: nine;

      background: url(${home}) no-repeat right center;

      background-size: cover;

    }

    &:nth-of-type (10) {

      grid-area: ten;

      background: url(${home}) no-repeat right center;

      background-size: cover;

    }

    &:nth-of-type (11) {

      grid-area: eleven;

      background: url(${home}) no-repeat right center;

      background-size: cover;

    }

 

   }

 }

`;

export default Portfolio

It would be better if you posted the example on CodeSandbox or StackBlitz.

You seem to have a syntax error here (missing { for the variable home)

     &:nth-of-type (1) {

       grid-area: one;

       background: url($home}) no-repeat right center;

       background-size: cover;

     }

Did you log out the imports just to make sure?

Not sure what the layout is you are going for but do you really need to place the images the way you are?


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Sorry about the messy post, I will properly format next time. As far as the typo I fixed that but issue still remains the problem, I can see the placeholders are there and my cursor changes to pointer like its supposed to but the actually picture does not show . Yes the gallery does need to be in that format .

Do you actually have a space between the nth-of-type and the parentheses?

It should be:

&:nth-of-type(1)

WOW ! Smh ! lol Thank you so very much ! Awesomesauce

Happy to help.

BTW, did you not get an error in the editor. Like a red squiggly line at the selector? I would think it should tell you there was an error.

No which is why I was so perplexed no squigglies, no errors in console notta nothing !

Might there be an extension for that I’m missing?

I tested it in CodeSandbox and it gave an error but it looks like it is coming from TypeScript Styled Plugin.

Are you using VS Code? If so I would suggest having syntax highlighting and IntelliSense for styled-components which you can get from an extension. That should give you error reporting as well (I would think).

Yes using Vs Code … I am re entering the coding field after a 15 year hiatus its all the same but different. My Vs, code is acting funny in the first place … I have to open as admin when I play with React because changes are not saved otherwise, I have to Create-react–app in command prompt then open in vs code in admin mode from there because it doesn’t give a template when created in V.S… I have tried the uninstall -g then npx create with no luck . Ive basically been creating things by work around for now … I do have intellisense . and most other ext. that should pre-fill and alert for such things… the little things I don’t remember but are important .

Just trying to get back into the swing … !

Basically I;m an old school coder getting a update :stuck_out_tongue:

The rust will come off I’m sure.

  • What OS are you using?

  • Where did you install VS Code, the default location?

  • Are you starting the React projects in normal folders that aren’t protected (protected as in system folders or whatnot)?

I don’t think there should ever be a need for admin rights and running a code editor with elevated privileges might not be the best idea considering how much third-party code you likely will be running. VS Code even has a Workspace Trust feature for some of the same reasons.

Not that I think it’s a huge problem but the issue just sounds annoying as well


You can also give Vite a go instead of create-react-app. It honestly beats create-react-app just on speed alone.

Windows 10 yes, default location. I am aware I should not be using it this way and yes VERY annoying mostly … Idk why its behaving this way , happened after I upgraded my hhd to ssd and installed fresh everything… but Ive never heard of Vite i’ll def check into it ,
If I create the whole thing from scratch in VS it works fine. so idk settings btwn VS and what just yet I have no clue … eventually Ill get to annoyed and dig deep to fix it …

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.