Different Multicolumn Sections Mobile/Desktop!

[noah12x2]

Hey,

i want different multicolumn sections on mobile / desktop, as i want the icons to be smaller on desktop as it seems pretty fat.

Can anyone please give me the code to have different multicolumn sections on mobile/desktop.

And maybe a code to make the Icons smaller on desktop!

Thanks in advance!

https://87fdxasaqjlvfzga-85421687108.shopifypreview.com

burtah

[EcomGraduates]

To display different multicolumn sections for mobile and desktop, you can create two separate sections in your Liquid code, one for desktop and one for mobile, and hide them based on the screen size using CSS.

add this  to your code  

<!-- Multicolumn section for desktop -->
<div class="multicolumn-section desktop-only">
  <!-- Your desktop multicolumn content -->
</div>

<!-- Multicolumn section for mobile -->
<div class="multicolumn-section mobile-only">
  <!-- Your mobile multicolumn content -->
</div>

CSS to hide/show the sections based on screen size

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}


@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }
  
  .mobile-only {
    display: block;
  }
}

/* Default icon size for mobile */
.icon {
  width: 50px; 
  height: 50px;
}

/* Smaller icons for desktop */
@media (min-width: 768px) {
  .icon {
    width: 30px; 
    height: 30px;
  }
}