How can I hide the footer of my product page on mobile devices only?

[MaisonBillonDon]

How can I hide the footer of my product page on mobile devices only? I originally wanted to move the footer to the very bottom of the page but no one seems to have a solution that works so now I just want to hide the footer on my product pages for mobile view only. I've included a screen shot of how the mobile view looks.

Theme: Origin 15.1

URL: https://billon.maison/products/rockera & https://billon.maison/products/rockero 

ScreenShot: 

[suyash1]

@MaisonBillonDon - it will need code tweak as product pages do not have any separate unique ids, if you can accept me as collab then I can do it

[MaisonBillonDon]

@suyash1 how can I accept you as a collaborator?

[devcoders]

Hello @MaisonBillonDon 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

@media screen and (max-width: 749px)
{
.footer__copyright {
display:none;
}
}

[MaisonBillonDon]

I only wanted to hide the footer on product pages only. 

[devcoders]

Hello @MaisonBillonDon 

Go to Online Store, then Theme, and select Edit Code.
Search for Layout/theme.liquid Add the provided code at the end of the file.

{% if template == 'product' %}
<style>
@media screen and (max-width: 749px)
{
.footer__copyright {
display:none;
}
}
</style>
{% endif %}

[MaisonBillonDon]

@devcoders @LizHoang  Neither of these code solutions worked. Could it be possible that the 'product' could be named something different based on the template? 

[devcoders · Accepted solution]

Hello @MaisonBillonDon 

Can you send me a screenshot of the code you added?

{% if template == 'product' %}
  <style>
    @media screen and (max-width: 749px) {
      .footer__copyright {
        display: none;
      }
    }
  </style>
{% endif %}

[MaisonBillonDon]

@devcoders Here is a screen shot:

[suyash1]

@MaisonBillonDon - take this code out of </style> tag, this red box code should start after </styles> tag and end before </body>

[MaisonBillonDon]

Thank You this worked! @suyash1 

[devcoders]

Hello @MaisonBillonDon 

Please add my code after the style.

[MaisonBillonDon]

Thank you @devcoders I've accepted your solution ! 🙏

[devcoders]

Hello @MaisonBillonDon 

You're very welcome! I'm thrilled to hear that you're pleased with the outcome. Don't hesitate to reach out if you need further assistance.

like and accepting the All solution. Thank you!

[LizHoang]

Hi MaisonBillonDon

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.liquid and add this code at the end of the file

@media screen and (max-width: 749px)
  {
    .footer__copyright {
      display: none !important;
      }
    }
  </style>
{% endif %}

Best,,

Liz