Keeping icons side by side in mobile

Site URL: https://www.efficience.ma

Hello guys!

I have a slight issue with my website regarding icons, I have made a small menu in a section which contains 6 image blocks which are linked to different pages on my site. On desktop they look fine but on mobile they become huge and stack on top of each other. How can i prevent this from happening? Should i format it a different way or should i inject some sort of custom code? 

Website in question: www.efficience.ma

Any input is greatly appreciated! Thank you in advance.

Regards.

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-bbcd22ee0280b4ec2919+.row>.col {
    width: 20% !important;
    float: left !important;
}
div#block-bbcd22ee0280b4ec2919+.row>.col * {
    font-size: 10px;
}
}

19 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-bbcd22ee0280b4ec2919+.row>.col {
    width: 20% !important;
    float: left !important;
}
div#block-bbcd22ee0280b4ec2919+.row>.col * {
    font-size: 10px;
}
}

 

It worked, it bumped one icon down below but its way better than before. Thank you so much!

On 9/25/2020 at 6:59 PM, MarvinS said:

It worked, it bumped one icon down below but its way better than before. Thank you so much!

you can edit 20%

100%/6 = 16.667%