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

Store Design
, , ,

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.
1

Hey, i have added a custom liquid image under my product info but it looks weird on mobile, can i hide it only on mobile?

1 Like
2

Hey @chrxskalitta

Could you please provide your Store URL and, if applicable, the Password too? Also, a screenshot of the exact image you’re talking about. Your cooperation is greatly appreciated!

Best Regards,
Moeed

3

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

4

https://izzyfit.de/products/hula-hoop

here is my store, no password needed

1 Like
5

Hey @chrxskalitta

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

1 Like
6

yes here, under the payment badges

Bildschirmfoto 2023-10-17 um 08.46.22.png
Bildschirmfoto 2023-10-17 um 08.46.22.png2880×1800 609 KB

7

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media screen and (max-width: 769px){
div#__pf {
display: none;
}
}
8

Hey @chrxskalitta

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

9

when I put the code there my whole description is hidden on mobile but the image is still there

10

Like the other Guys solution same problem, when I put the code in my whole description is hidden on mobile but the image is still there

11

Hi @chrxskalitta

Go to your Online store > Themes > open theme.liquid file, add this code before tag
1 Like