Prevent RESIZING of lists when going to Mobile

Site URL: https://everlastcreative.com/

Hello,

I'm wanting my 'Navigation' list. To be split 2x2 the second it can no longer retain the 1x4 alignment.

Instead of going from (1x4) desktop, to (1x3)  tablet then 2x2 and then 4x1 for mobile.

Is there any custom CSS that could achieve that? 

Any help would be AMAZING!!

Hi! Try adding this CSS code snippet to Design > Custom CSS. This will force that list to be a 2x2 grid when the 1x4 grid changes:

@media(max-width: 1100px) {
   [data-section-id="6184eca70288483db74037b9"] .user-items-list-simple { 
      grid-template-columns: repeat(2,1fr) !important; 
   }
}

Hey Caroline,

Thanks so much for your help! Unfortunately I'm not managing to achieve the 2x2 despite your code 😞 The same problem is still presenting :((

Is there perhaps an alternative piece of code?

NEVER MIND IT WORKS ! YOUR AMAZING THANK YOU 😀😅

Glad you figured it out!