2 replies

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>

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

.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.

KP-C

Kevin Powell - Community•3y ago•

2 replies

D4niel

HTML and CSS responsiveness issues using Flexbox

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

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

.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.

HTML and CSS responsiveness issues using Flexbox

Similar Threads

HTML and CSS responsiveness issues using Flexbox

Similar Threads

Similar Threads

Similar Threads