Different Multicolumn Sections Mobile/Desktop!

Store Design
,

Topic summary

A user wants to display different multicolumn sections on mobile versus desktop, specifically to make icons smaller on desktop where they currently appear too large.

Proposed Solution:

  • Create two separate multicolumn sections in Liquid code—one for desktop, one for mobile
  • Use CSS classes to control visibility based on screen size

Implementation approach:

  • Add .desktop-only and .mobile-only classes to respective sections
  • Use media queries to hide/show sections:
    • Hide desktop section on screens ≤767px
    • Hide mobile section on screens ≥768px
  • Adjust icon sizes via CSS:
    • Mobile: 50px × 50px (default)
    • Desktop: 30px × 30px (smaller)

Status: Solution provided with code snippets for both HTML structure and CSS styling. Implementation pending user testing.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

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

2

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

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;
  }
}