Hi ^^
can anyone teach me how to hide media grid from mobile view?
Topic summary
Goal: hide the “media grid” section on mobile devices.
Two approaches shared:
- Edit theme.liquid and add code above to hide the section on small screens. A result screenshot shows the section hidden on mobile, but the exact code snippet wasn’t visible. Editing core theme files was cautioned against due to update/maintenance issues.
- Preferred: use the section’s “Custom CSS” field with a mobile media query. Example: @media (max-width: 767px) { { display: none; } } placed in that section’s Custom CSS. Although the selector appears invalid, Shopify scopes Custom CSS to the section and converts it into a section-specific selector (e.g., #shopify-section-… { display: none; }) so the entire section is hidden on mobile.
Key details:
- @media (max-width: 767px) targets typical mobile widths.
- Shopify’s automatic scoping makes it safe to target only the chosen section via Custom CSS.
Status: No explicit confirmation from the requester, but a non-invasive, update-safe solution (section-level Custom CSS) is provided. Images were used to identify the section and show the mobile result.
Hey @Sheeks
Just to confirm are you talking about this section?
If yes, then
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Do not edit your theme code – this will make it difficult to update it in future.
Rather paste this into “Custom CSS” setting of the section in question:
@media (max-width: 767px) {
* {
display: none;
}
}
1 Like
Looks like this will also work:
@media (max-width: 767px) {
{
display: none;
}
}
Though not valid CSS by itself, Shopify converts it to:
@media (max-width: 767px) {
#shopify-section-template--23094689038611__media_grid_PqwjgK {
display: none;
}
}
Which is ultimately what we want to hide this entire section.