How to fix <a> tag moving the image nested with it to the left?

HTML-CSS
1

the images are using flexbox. I added the anchor element with a link nesting each of the images

the images now are positioned more on the left. before they were all perfectly centered

Why is this happening and how do I fix?

2

Hey! can you add the code snippet so we can see what you are trying to do.

3

here is the HTML and CSS code:

<div id="projects">
    <p>Survey Form, Tribute Page, Technical Documentation Page and Product Landing Page</p>
    <a href="#"><img src="lorem.JPG" class="project-tile"/></a>
    <a href="#"><img src="ipsum.JPG" class="project-tile" /></a>
    <a href="#"><img src="lorem2.JPG" class="project-tile" /></a>
    <a href="#"><img src="ipsum2.JPG" class="project-tile" /></a>
  </div>

#projects {
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .project-tile {
    width: 80%;
    height: 1000 px;
    padding: 3px;
    border-radius: 15px;
}
4

Hey! is this the behavior you’re looking for?

Screenshot from 2022-07-31 12-38-37
Screenshot from 2022-07-31 12-38-371296×723 123 KB

5

Hi, the goal is to display the 4 images in a 2-column layout or 1-column layout vertically
similar to how it is displayed here https://personal-portfolio.freecodecamp.rocks/#projects

6

The easiest way to do that is by using CSS grid and media queries. you can explicitly tell how it how many columns you want at a particular resolution and then change the number of columns at a breakpoint. for example:

.container{
    display: grid;
// this next line will create a grid of three equal sized
// columns.
    grid-template-columns: 1fr 1fr 1fr; 
}

@media screen and (max-width: 720px) {
    .container{
// change the number of columns when the screen
//width is below 720px;
         grid-template-columns: 1fr 1fr;
    }
}

for a deep dive into CSS grid, use this tutorial!

7

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