🏆HubSpot Themes Challenge 2021 - 2nd Prize Winner! View Theme
Contact

    Hiding HubSpot modules on mobile/desktop at template level

    Difficulty Level: Intermediate. This post assumes a solid understanding of HubSpot tools and some technical knowledge. Instructions are detailed and can be applied as they appear on the post.

    Hiding a module based on your responsive breakpoints can be very useful.
    On the page editor, you can hide modules for a specific view by selecting "Edit for mobile" / "Edit for desktop" and then clicking the "Hide this module" icon on the specific module you want to hide.

     

    edit step1

     

    edit step2

     

    But did you know you can also achieve this at template level? It works the exact same way as setting different padding/margin for a section on a template:

    {% raw %}{% dnd_module
       path="@hubspot/rich_text",
       hidden={ "default":false, "mobile":true }
    %}

    {% end_dnd_module %}

    That will hide the given module on mobile but show it on desktop!

    Written by: Barry Grennan Last Updated: March 30, 2022

    Thank you! I appreciate the feedback 😊

    Sorry to hear that! 🙁

    I'd appreciate if you could take a moment to let me know how I can improve this article.

    hand-drawn-monitor-and-mouse

    Looking for a HubSpot website developer?

    Let me help you with website themes, templates, page setup and custom modules. 

    Get in touch

    Stephanie O'Gay Garcia

    Hi! 👋 I'm a freelance HubSpot Website Developer based in Toronto (Canada). Give me a shout if you have questions about this post or there's anything I can help you with.