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.
@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!