html - How to have the social media icons resized properly when the size of the display changes?

Question

I have been changing the height and widths by using max width and max height attributes to check that the icons layout will change accordingly when the size of the display screen becomes smaller. However, I have been unable to get the result I am reimagining. Below I have the HTML Code, and I have a link of what I am trying achieve. Basically if the screen is too small, I would rather have two icons per line to have them spaced out correctly. How should I go about achieving this if max-height and max-width are not helping? I am fine with the layout of the icons with their labels as it is if the screen size is large enough, just trying to make it show up cleanly when screen is smaller. My code is a smaller snipper of what it is part of on purpose below.

.picture {
  height: 32px; 
  width: 32px; 
}

<a href="https://about.fb.com/k" ><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 1</span></a>                            
 <a class="social-link mr-2" href="https://about.fb.com/k"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 2</span></a> <a class="social-link mr-2" href="https://about.fb.com/k" target="_blank" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 3</span></a> <a class="social-link mr-2" href="https://about.fb.com/k" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png"/><span style="padding-left:3px">Label 4</span></a>

question from:https://stackoverflow.com/questions/65941404/how-to-have-the-social-media-icons-resized-properly-when-the-size-of-the-display

Answer 1

One option:

• Split the icons into two "rows."
• Then, using FlexBox, align the rows next to each other so that on large screens they appear to be a single row.
• Set flex-wrap: wrap so that on small screens the second row moves to the bottom.

Example:

.picture {
  height: 32px;
  width: 32px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

<div class="container">
  <div class="row1">
    <a href="https://about.fb.com/k"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 1</span></a>
    <a class="social-link mr-2" href="https://about.fb.com/k"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 2</span></a>
  </div>
  <div class="row2">

    <a class="social-link mr-2" href="https://about.fb.com/k" target="_blank" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 3</span></a>
    <a class="social-link mr-2" href="https://about.fb.com/k" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 4</span></a>
  </div>
</div>