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

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?

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

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>

#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;

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

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

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:

    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) {
// 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!

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