Kevin Powell - Community•10mo ago

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.

2 Replies

Caps-look•10mo ago

I am on mobile. I would add on ".link-image" "width 50%". I would also remove inline height and width IF they are not necessary.

D4nielOP•10mo ago

SOLVED: https://stackoverflow.com/questions/26888751/chrome-device-mode-emulation-media-queries-not-working

Stack Overflow

Chrome Device Mode Emulation Media Queries Not Working

For some reason device emulation mode is not reading my media queries. It works on other sites including my own sites that I made with bootstrap, but it's not working on media queries I am using from

Gaming

Programming

HTML and CSS responsiveness issues using Flexbox