Archived topic
Disable an element on mobile and tablet view
5 replies · Started by Pieter on November 9, 2020
Hello,
Rookie question: how do you disable an element on mobile and tablet? I only want to display this banner on desktop.
I'm not very experienced with code / css.
Below is the code of my element. It is a cta banner / button above my footer.
<!-- 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 -->Hi there,
Where are you adding that code above? In an Element as HTML?
Hello Leo
I open my element -> Switch from visual editor to code editor -> That is the code I get.
Now I'm wondering what I must adjust to show this only on desktop.
In another topic I found this:
However, I don't know how and where to put this so my banner is only visible on desktop.
Shouldn't need to edit the code.
Just to confirm, you are referring to a block element here?
https://docs.generatepress.com/article/block-element-overview/
Yes I am: Block - Hook
generate_before_footer
So if I don't need to edit the code, what else should I do?
This should help:
https://www.screencast.com/t/WZRUpkNkd0cR
