[Support request] Disable an element on mobile and tablet view

Home Forums Support [Support request] Disable an element on mobile and tablet view

Home Forums Support Disable an element on mobile and tablet view

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1524377
    Pieter

    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 -->
    #1524384
    Leo
    Staff
    Customer Support

    Hi there,

    Where are you adding that code above? In an Element as HTML?

    #1524391
    Pieter

    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:

    This content will only display on mobile

    However, I don’t know how and where to put this so my banner is only visible on desktop.

    #1524392
    Leo
    Staff
    Customer Support

    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/

    #1524403
    Pieter

    Yes I am: Block – Hook
    generate_before_footer

    So if I don’t need to edit the code, what else should I do?

    #1524410
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.