CODEWITHSUNDEEP
htmlcsssassflexbox
PotatoMC
PotatoMC

Reputation: 83

Flex confusion with child elements

I'm trying to learn flex and still a beginner to CSS. I'm trying to make a flex that shows 4 images next to each other, all images are the same size. When I add an anchor element around the img, it does this weird overlapping instead of changing the image size, I think it's changing the size of the anchor but leaving the images at full size. How can I fix this? also, using scss not css.

enter image description here

HTML:

 <div class="row">
        <a href="#"
          ><img src="images/restaurants/logo1.png" alt="Branch 1 logo"
        /></a>

        <a href="#"><img src="images/icons/menu.png" alt="Menu icon" /></a>
        <a href="#"> <img src="images/icons/map.png" alt="Map icon" /> </a>
        <a href="#"> <img src="images/icons/call now.png" alt="Call Now" /> </a>
      </div>

(scss):

.card {
  .row {
    display: flex;
    max-width: 100%;
    padding: 0% 0.2rem 0 0.2rem;
    padding-top: 0.5rem;
  }

  .row > * {
    width: 23.5%;
    flex-basis: 1;
    margin: auto;
  }

Thanks

Upvotes: 0

Views: 54

Answers (1)

Vikas Harad
Vikas Harad

Reputation: 452

add CSS below style in CSS file

img{
  width:100%;
}

Upvotes: 1

Related Questions