Hi, I am using Joomla4 - Helix Ultimate - SPPB and have now been trying all sorts - but no success; what I need to achieve is - have for example on desktop a grid of 6 columns and then I want to show 3 columns on each row in mobile (phone). I use following code - all works very well if seen on desktop as well as on reducing the size on desktop to minimum - but not on the phone - looks like the code is completele ignored when on mobile phone

.grid-6 { display: grid; gap: 10px 5px; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }

@media only screen and ( max-width: 576px ) { .grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); } }

the code is within a preset.css and is being taken on - but ignored I have been on this all afternoon - any chance anybody can give me a hint on this ? https://postimg.cc/p5kVyLs8