Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
2 replies
D4niel

HTML and CSS responsiveness issues using Flexbox

I have a simple HTML and CSS homepage, and I have a div container that uses Flexbox and contains links with pictures, but for some reason, the boxes shrink on the mobile version.
Note: I have multiple types of images (svg, png and jpeg) and multiple sizes (since some take less or more space, although they have different sizes, they fit the same visually).
<div class="links">
<div>
<a class="link-text" href="...">
<div class="link-image"><svg class="github-svg" viewBox="0 0 16 16"  width="116px" height="116px">
<path d="..."></path>
</svg></div>
<p>GitHub</p>
</a>
</div>
    <div>
<div class="link-image"><img src="images/paypal-logo.png" width="100px" height="100px"></div>
<p>Donate</p>
</div>
   </div>

CSS:
.links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    
    padding-top: 5rem;
    gap: 7rem;
}

.link-image {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}




The first image shows the issue and the second shows the wanted outcome.
Capture.PNG
Capture2.PNG
Was this page helpful?