How can I hide a custom liquid image on mobile view only?

Topic summary

Goal: Hide a custom liquid image under the product info on mobile only.

Context shared:

Proposed solutions:

  • Add a CSS media query in base.css targeting div#__pf to display: none for screens ≤769px.
  • Insert additional code in theme.liquid above (exact code not shown in thread).
  • Latest advice: place code before in theme.liquid (exact code not shown).

Current outcome/issues:

  • OP reports both attempted approaches hide the entire product description on mobile, while the specific image remains visible.
  • This suggests the selector (div#__pf) or target element is incorrect, or the image resides outside the targeted container.

Status and next steps:

  • Unresolved/ongoing. Needs inspection of the page’s DOM to identify the correct selector for the specific image and apply a mobile-only CSS rule to that element only.
  • No final fix or confirmed solution yet.
Summarized with AI on January 15. AI used: gpt-5.

Hey @chrxskalitta

Can you share a screenshot of the image that you want to hide on mobile?

1 Like