Hi, in my footer - I have 6 columns wherein I have added icons. Looks good on the desktop view, but on the mobile view the icons look huge and are vertically stacked.
I want the icons to be horizontally next to each other, smaller in size, and no scrolling horizontally (all 6 should appear in the same line).
I was able to get them in one line horizontally and to the desired smaller size, but it’s only visible through horizontal scrolling (I think I am unable to reduce the column width). Putting down the code that I used.
@media only screen and (max-width: 768px) {
.multicolumn-card__image-wrapper {
flex: 1 1 auto; /* Allow images to shrink and take up equal space /
max-width: 20%; / Reduce individual image width */
}
.multicolumn-card__image {
width: 100%; /* Ensure images fit their container /
height: auto; / Maintain aspect ratio /
margin: 0 auto; / Center images within their wrappers */
display: block;
}
.multicolumn-list {
display: flex; /* Flexbox layout for horizontal alignment /
flex-wrap: nowrap; / Prevent wrapping /
justify-content: space-around; / Space out images /
overflow-x: auto; / Add horizontal scroll if content overflows */
}
}
Please help!!