- This topic has 5 replies, 2 voices, and was last updated 3 years, 4 months ago by Leo.
-
AuthorPosts
-
November 9, 2020 at 11:38 am #1524377Pieter
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 -->
November 9, 2020 at 11:44 am #1524384LeoStaffCustomer SupportHi there,
Where are you adding that code above? In an Element as HTML?
November 9, 2020 at 11:48 am #1524391PieterHello 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:
This content will only display on mobileHowever, I don’t know how and where to put this so my banner is only visible on desktop.
November 9, 2020 at 11:49 am #1524392LeoStaffCustomer SupportShouldn’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/November 9, 2020 at 11:56 am #1524403PieterYes I am: Block – Hook
generate_before_footerSo if I don’t need to edit the code, what else should I do?
November 9, 2020 at 12:03 pm #1524410LeoStaffCustomer SupportThis should help:
https://www.screencast.com/t/WZRUpkNkd0cR -
AuthorPosts
- You must be logged in to reply to this topic.