CSS Photo gallery

Hi,

I am building a website landing page. Have developed most of the code, but struggling with a photo grid showing some of my projects. I have tried various tactics to create it, and thought I was getting somewhere but have messed up the footer now as well!

I am unsure of what I am doing wrong, I understand (i think) basic principles of flexbox and grids in CSS, but somewhere the photo gallery is sending the footer into the gallery itself.

I have commented out some syntax with one of the other methods that I have tried. I’m sure this is easier for someone with much more experience than me. I’m hoping someone is able to help me with this.

This is my CSS code, the latest edition.

.project-tile {
  border: 3px solid #f79f79;
  width: 250px;
  height: 200px;
}

div .project-tile {
  width: 100%;
  height: auto;
}

.description {
  padding: 20px;
  text-align: center;
}
.portfolio {
  box-sizing: border-box;
  padding: 0 6px;
  float:left;
  width: 25%;
  display: block;
}

.tile {
  width: 250px;
  height: 220px;
}

@media only screen and (max-width: 700px) {
  .portfolio {
    width: 40%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .portfolio {
    width: 100%;
  }
}
.table::after {
  content: "";
  display: table;
  clear: both;
}

This is the previous code that I tried, which didn’t effect the footer.

 .project-tile .tile {
    display: grid;
    align-items: center;
    object-fit: scale-down;
    width: 49%;
   }

  .portfolio .tile {
    border: 2px solid #f79f79;
   }

  .tile {
    height: auto;
    min-width: 180px;
    min-height: 140px;
  }

 .portfolio .description {
  padding: 15px;
  text-align: center;
}

  .project-tile {
     position: relative;
     width: 1200px;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     transform-style: preserve-3d;
     perspective: 700px;
   }
   
   .project-tile .tile {
      position: relative;
      width: 300px;
      height: 300px;
      transition: 1s;
      transform-style: preserve-3d;
      overflow: scroll;
     }

     .project-tile:hover .tile {
      transform: rotateX(30deg);
     }

     .project-tile .tile:hover {
      transform: rotate(0deg) scale(1.20);
      z-index: 1;
      box-shadow: 0 10px 25px #3B7080;
     }

This is the HTML code for the gallery. I have three of these identical, all stand-alone, except for the class=“table” which is the only one right at the end.

<div class="portfolio">
  <div class="project-tile">
     <a href="https://github.com/mariabcodes/technical-documentation-page" target="_blank">
        <img src="Screenshot 2023-05-09 at 17.35.15.png" class="tile" alt="Informational page">
    </a>
    <div class="description">
      <p>An informational page about psychology, in a technical documentation style.</p>
    </div>
  </div>
</div>

<div class="table"></div>

This is the footer CSS code.

footer {
 background-color: #f79f79;
 font-family: Arial, sans-serif;
 word-wrap: none;
 text-align: left;
 margin: -10px;
 padding: 30px;
 display: flex;
 flex-wrap: wrap;
 min-height: 250px;
 width: 100%;
}

.footer-block {
  display: flex;
  justify-content: center;
}

This is the start of footer HTML code.

<footer id="contact-me">
    <div class="footer-block">
      <div id="question">
            <p>Interested in connecting with me? Contact through media profiles:</p>
      </div>

I’m really sorry that there is a lot to go through, I really appreciate any help!

It would probably be best if we can see the code for your entire page. Can you provided a link to it?

Yes of course, I have my github link - GitHub - mariabcodes/portfolio-website: Building my website - HTML and CSS syntax. Hopefully this helps.

Thank you so much for your help! Much appreciated.

The first thing I would do is run your HTML through a validator and clean up all of the issues. I’m guessing you are missing a closing tag somewhere (such as a </div>) that is causing the footer to be placed inside of the portfolio div.

Thank you! I had a look and couldn’t find any

that’s not closed. I tried to place all ‘portfolio’
s into one whole div and that seemed to solve that.

The other issue that I had, is the photo grid. The grid is now above the footer, but I cannot get it to be as a grid. I have tried googling and youtube-ing it for the past week.

Edit - so it seems (kind of) as it’s supposed to on a small screen, but as soon as larger than ~ 750pixels, it’s as in the screenshot. I guess there is something going wrong in terms of the grid sizing(?)

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