How to hide Shopify section on Desktop & Mobile Devices?

Topic summary

Main issue: Hide/show a custom Liquid section differently on mobile vs. desktop to use device-specific images.

Proposed approaches:

  • Use CSS to control visibility per device; identify the specific section IDs to target.
  • Add custom CSS with media queries (rules that apply based on screen width):
    • Mobile example (max-width: 768px)
    @media only screen and (max-width: 768px) { * { display: none; } }
    • Desktop example (min-width: 769px)
    @media only screen and (min-width: 769px) { * { display: none; } }
    Note: The provided snippets use the universal selector (*) to hide content at those breakpoints.

Assets: A screenshot is included showing where to add the custom CSS within the section settings.

Status: No confirmation from the original poster; no solution marked. Discussion remains open.

Summarized with AI on December 14. AI used: gpt-5.

How to hide Shopify section on Desktop & Mobile Devices?

How would I hide a custom liquid section on mobile and desktop devices? I need one section for mobile devices and one section for desktop devices, reason being image adjustment.

Image on Mobile device needs to be custom compared to desktop and I just want to have 2 separate liquids.

@Brian-A - using css you can hide/show the section you want, need to get the ids of those sections

Hi @Brian-A ,

For this you can custom CSS. You can follow below steps to show/hide sections on different device.

Step 1: Go to the section you want to show/hide.

Step 2: Add below code on custom CSS.

To hide on mobile, add bellow css:

@media only screen and (max-width: 768px) {
*{
display: none;
}
}

To hide on desktio, add bellow css:

@media only screen and (min-width: 769px) {
*{
display: none;
}
}

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka