CSS - 图标布局随着屏幕尺寸的变化从水平变为垂直

Question

I have an issue when changing screen size (to different device or viewport) with some icons.

When the screen size drops 960 and below the icons change from horizontal orientation to vertical. I have break points in my css for @ media but nothing changes at 960 for the socialIcons or related divs above.

Icons are svg.

Correct layout

Broken layout

Code Snippet

#social_block {
    margin: 0 auto;
    text-align: center;
    padding-top: 5rem;
    font-weight: bold;
}
#socialDisplay {
    width: 100%;
    padding-bottom: 1rem;
}
.socialIcons {
    width: 100%;
    display: inline;
}


<div id="social_block">

<div id="socialDisplay">CONNECT WITH US</div>


<div class="socialIcons">
<img class="link_item" id="FB" src="/xxx" rel="https://www.facebook.com/xxx/" data-method="open"> 
<img class="link_item" id="IG" src="/xxx" rel="https://www.instagram.com/xxx/" data-method="open"> 
<img class="link_item" id="LI" src="/xxx" rel="https://www.linkedin.com/company/xxx" data-method="open">
</div>

</div>

Answer 1

I would add this to the social icons CSS

 #social_block { margin: 0 auto; text-align: center; padding-top: 5rem; font-weight: bold; } #socialDisplay { width: 100%; padding-bottom: 1rem; } .socialIcons { width: 100%; display: inline; display: flex; flex-direction: row; } 

 <div id="social_block"> <div id="socialDisplay">CONNECT WITH US</div> <div class="socialIcons"> <img class="link_item" id="FB" src="https://i.stack.imgur.com/dtPNz.png" rel="https://www.facebook.com/xxx/" data-method="open"> <img class="link_item" id="IG" src="https://i.stack.imgur.com/dtPNz.png" rel="https://www.instagram.com/xxx/" data-method="open"> <img class="link_item" id="LI" src="https://i.stack.imgur.com/dtPNz.png" rel="https://www.linkedin.com/company/xxx" data-method="open"> </div> </div>