Responsive images centered on one line-CodePudding

I'm trying to have social icons (.png) centered on a page, on a single line, and have them shrink proportionately when the screen is too small to keep them on one line.

I'm using HTML/CSS/Bootstrap 4

Currently, they go on to a second line when the screen is too small (mobile).

I have tried a couple of different solutions but only got them to shrink width-wise.

Here's my code:

CSS:


    .socialcontainer {  
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: grid;  
        grid-gap: 8px;  
        grid-template-columns: repeat(auto-fit, 60px);
        grid-template-rows: repeat(1, 70px);  
        justify-content: center;
            }

HTML:


    <div class="socialcontainer">  
    
    <a href="SPOTIFY LINK" target="_blank"><img class="img-responsive" border="" alt="Spotify" src="/images/icon-spotify.png" width="60" height="60"></a>
        
    <a href="APPLE MUSIC LINK" target="_blank"><img class="img-responsive" border="" alt="Apple Music" src="/images/icon-itunes.png" width="60" height="60"></a>
    
    <a href="YOUTUBE MUSIC LINK" target="_blank"><img class="img-responsive" border="" alt="YouTube Music" src="/images/icon-ytmusic.png" width="60" height="60"></a>
        
    <a href="DEEZER LINK" target="_blank"><img class="img-responsive" border="" alt="Deezer" src="/images/icon-deezer.png" width="60" height="60"></a>
        
    <a href="BANDCAMP LINK" target="_blank"><img class="img-responsive" border="" alt="Bandcamp" src="/images/icon-bc.png" width="60" height="60"></a>
        
    <a href="FACEBOOK LINK" target="_blank"><img class="img-responsive" border="" alt="Facebook" src="/images/icon-fb.png" width="60" height="60"></a>
            
    <a href="INSTAGRAM LINK" target="_blank"><img class="img-responsive" border="" alt="Instagram" src="/images/icon-ig.png" width="60" height="60"></a>
        
    <a href="YOUTUBE LINK" target="_blank"><img class="img-responsive" border="" alt="YouTube" src="/images/icon-yt.png" width="60" height="60"></a>
</div>

(I've changed the links out)

I'm kind of a noob, so if my code is clunky, please feel free to roast me about it lol. Any help is appreciated. Thank you.

CodePudding user response：

I would do that using flex instead of grid:

.socialcontainer {
  display: flex;
  justify-content: center;
  gap: 10px; /* OR 1% OR 0.5em ETC */
}
.socialcontainer a {
  max-width: 60px;
  display: inline-block;
}
.socialcontainer a img {
  width: 100%;
  height: auto;
}

 <div class="socialcontainer">
   <a href="SPOTIFY LINK" target="_blank"><img class="img-responsive" border="" alt="Spotify" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="APPLE MUSIC LINK" target="_blank"><img class="img-responsive" border="" alt="Apple Music" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="YOUTUBE MUSIC LINK" target="_blank"><img class="img-responsive" border="" alt="YouTube Music" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="DEEZER LINK" target="_blank"><img class="img-responsive" border="" alt="Deezer" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="BANDCAMP LINK" target="_blank"><img class="img-responsive" border="" alt="Bandcamp" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="FACEBOOK LINK" target="_blank"><img class="img-responsive" border="" alt="Facebook" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="INSTAGRAM LINK" target="_blank"><img class="img-responsive" border="" alt="Instagram" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="YOUTUBE LINK" target="_blank"><img class="img-responsive" border="" alt="YouTube" src="https://via.placeholder.com/150" width="60" height="60"></a>
</div>

In this way the <a> as columns will stretch proportionally up to 60px, and the images will fit.