[Resolved] Disable an element on desktop view (only show in mobile) using css?

[Derek]

Hello,

I’m trying to figure out how to disable a CSS element on desktop view: in particular this #ez-toc-container. Basically I’m using a widget that only works in desktop view, and the #ez-toc-container, above my heading, is currently showing on all views (when I really only need it to show up in mobile when my widget will not).

Is it even possible to disable something on desktop view using css? I’m using a plugin to disable the widget on mobile view, but the plugin only works for widgets so I can’t use it to disable the quick links box (#ez-toc-container) in desktop view. I read somewhere that it depends on your theme if you can disable elements in different view modes.

Thank you!!!!!

[David]

Hi there, to hide an element on desktop you can use a media query:

@media (min-width: 1024px) {
    #ez-toc-container {
        display: none;
    }
}

[Derek]

Wow that works beautifully. Thank you, learning a lot here 🙂

[David]

You’re welcome!

As a note, GP has 3 built in classes for hiding elements on devices:

hide-on-mobile
hide-on-tablet
hide-on-desktop

So you can add these classes to any element you choose.

eg.

<div class="hide-on-desktop hide-on-tablet">
	This content will only display on mobile
</div>

[Jessica]

hiya, hide-on-desktop is not working for me, using it on a hook element to hide a footer on desktop but it’s not hiding it!

[David]

Hi there,

can you raise a new topic where you can share a link to your site so we can take a look.

[Pieter]

Hello David,

Rookie question: how do you add these classes to an element?

When I go to the code editor in an element, I’m not sure where to put this?

This is what I get (I only want to show this on desktop devices):

<!-- wp:generateblocks/container {"uniqueId":"597ef853","paddingTop":"20","paddingRight":"20","paddingBottom":"0","paddingLeft":"20","marginBottom":"-10","borderRadiusTopRight":"0","borderRadiusBottomRight":"0","borderRadiusBottomLeft":"0","borderRadiusTopLeft":"0","backgroundColor":"#0693e3","gradient":true,"gradientDirection":79,"gradientColorOne":"#0693e3","gradientColorTwo":"#fcb900","alignment":"left"} -->
<div class="gb-container gb-container-597ef853"><div class="gb-inside-container"><!-- wp:generateblocks/grid {"uniqueId":"4ebd7976","columns":2} -->
<div class="gb-grid-wrapper gb-grid-wrapper-4ebd7976"><!-- wp:generateblocks/container {"uniqueId":"14bb130d","isGrid":true,"gridId":"4ebd7976","width":75,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0"} -->
<div class="gb-grid-column gb-grid-column-14bb130d"><div class="gb-container gb-container-14bb130d"><div class="gb-inside-container"><!-- wp:heading -->
<h2><span class="has-inline-color has-white-color">Download mijn gratis content planning</span></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><span class="has-inline-color has-white-color">Met behulp van deze content planning zet je je Social Media strategie in no-time op poten. </span></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"c4862857","isGrid":true,"gridId":"4ebd7976","width":25,"paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0"} -->
<div class="gb-grid-column gb-grid-column-c4862857"><div class="gb-container gb-container-c4862857"><div class="gb-inside-container"><!-- wp:generateblocks/button-container {"uniqueId":"8eb63df1"} -->
<div class="gb-button-wrapper gb-button-wrapper-8eb63df1"><!-- wp:generateblocks/button {"uniqueId":"1fc4a530","backgroundColor":"#0366d6","textColor":"#ffffff","backgroundColorHover":"#222222","textColorHover":"#ffffff","showAdvancedTypography":true,"fontWeight":"400","fontSize":16,"textTransform":"uppercase","letterSpacing":0.03,"marginTop":"25","paddingTop":"15","paddingRight":"20","paddingBottom":"15","paddingLeft":"20"} -->
<a class="gb-button gb-button-1fc4a530" href="https://webiste.com/"><span class="button-text">Gratis content planning</span></a>
<!-- /wp:generateblocks/button --></div>
<!-- /wp:generateblocks/button-container --></div></div></div>
<!-- /wp:generateblocks/container --></div>
<!-- /wp:generateblocks/grid --></div></div>
<!-- /wp:generateblocks/container -->

[Leo]

Can you open a new topic for your question?

This one is too old already.

Thanks 🙂

[Author]

Posts