CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
sbastmorano
sbastmorano

Reputation: 1

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

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>

Link of what trying achieve: https://share.sketchpad.app/21/bdc-02f4-1f5b64.png

Upvotes: 0

Views: 1125

Answers (2)

Jacob Lockard
Jacob Lockard

Reputation: 1275

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>

Another Option (Without FlexBox):

  • Split the icons into two "rows."
  • Make the rows inline-block.

Example:

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

.row1, .row2 {
  display: inline-block;
}
<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>

Note: If you want to space the icons differently on small screens, you'll likely need to use a media query.

Upvotes: 1

Johannes
Johannes

Reputation: 67814

You could use two containers for the two pairs to which you apply display: inline-block and make those (full-width) blocks in a media query, using some other settings as shown below:

.wrap_all {
  text-align: center;
}

.container1,
.container2 {
  display: inline-block;
}

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

@media (max-width: 480px) {
  .container1,
  .container2 {
    display: block;
    text-align: center;
  }
<div class="wrap_all">
  <div class="container1">
    <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="container2">
    <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>

Upvotes: 0

Related Questions