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

[chrxskalitta]

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?

[Moeed]

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

[ZestardTech]

Hello There,

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

[chrxskalitta]

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

 here is my store, no password needed

[Moeed]

Hey @chrxskalitta 

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

[chrxskalitta]

yes here, under the payment badges

[Moeed]

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 </body> tag

<style>
@media screen and (max-width: 767px) {
div#__pf {
    display: none !important;
}
}
</style>

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

Best Regards,
Moeed

[chrxskalitta]

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

[ZestardTech]

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;
}
}

[chrxskalitta]

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

[Dan-From-Ryviu · Accepted solution]

Hi @chrxskalitta 

Go to your Online store > Themes > open theme.liquid file, add this code before </head> tag

<style>
@media (max-width: 767px) {
.product__info-container > img { display: none !important }
}
</style>