1

When I add an anchor to an image, the grid breaks. with anchor tag](https://i.stack.imgur.com/ykr64.jpg) without acnchor tag](https://i.stack.imgur.com/6HPE4.png)

I quadrouple checked my code, I searched overstack, and google, and nothing addresses this directly. I also noticed someone asked this question 2 years ago, but he didn't get a clear answer. Please help me. Thanks in advance.

<div class="food-box">
     <h1 id="food-title">FEATURED MENUS</h1>
     <a href="./brunch.html"> <img id="dish1" src="./resources/images/ft-food1.png" /></a>
     <h3 id="dish-title1" >BRUNCH</h3>                
     <a href = './lunch.html'><img id="dish2" src="./resources/images/ft-food1.png" /></a>
     <h3 id="dish-title2" >LUNCH</h3>
     <a href="./dinner.html"><img id="dish3" src="./resources/images/ft-food1.png" /></a>
     <h3 id="dish-title3" >DINNER</h3>
.food-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    row-gap: 0em;
    color: #262626;
    background-color: #fdfdfd;
    font-family: 'Roboto', sans-serif;
}


#food-title {
    grid-column-start: 2;
    position: relative;
    justify-self: center;
    }

#dish1 {
    grid-column-start: 1;
    padding-left: 1em;
    grid-row-start: 2;
    max-width: 20em;
    }

#dish-title1 {
    position: relative;
    left: 7em;
    grid-column-start: 1;
    padding-left: 1em;
    }

#dish2 {
    grid-column-start: 2;
    grid-row-start: 2;
    max-width: 20em;
    }

#dish-title2 {
    position: relative;
    left: 7em;
    grid-column-start: 2;
    grid-row-start: 3;
    
    }

#dish3 {
    grid-column-start: 3;
    grid-row-start:2;
    max-width: 20em;
    }

#dish-title3 {
    position: relative;
    grid-column-start: 3;
    grid-row-start: 3;
    left: 7em;
    }    

1 Answer 1

0

You have specific grid styling for your images (e.g. #dish1 { grid-column-start: 1; }).

When you wrap the images in links, the images are no longer grid children. The links are the grid children instead. You're styling the wrong elements.

1
  • Ahhhh woW! Ok thank you! I didn't know the <a> counts as a container... Now I know, Lesson learned!
    – SoulTech9
    Nov 7, 2022 at 16:36

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.