Reputation: 1
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
Reputation: 1275
One option:
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):
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
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