Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #333734

    I’m trying to hide a shortcode button depending on the screen size, there should be different links when if it’s desktop or mobile, so I have to switch betwen two buttons.

    But I wonder why the following code don’t work? If I use a color section, I can set an ID, but the color section don’t fit the layout of this page. I have also tested to use a code block, men then the shortcode isn’t generated, I get no button, just the shortcode on the page! Preciate some suggestions how this could be done.

    Quick-CSS: (This is just a small part of the CSS)
    #desktop-btn {
    display: none;
    }

    I added this in a text-block
    <div id=”desktop-btn”>[av_button label='Text' link='manually,http://link' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='large' position='center' icon_select='no' icon='ue800' font='entypo-fontello']</div>

    Also when I just try a simple link like this:
    Text
    and use this in Quick CSS, there is no effect!? What could be the reason for this?

    #desktop-link {
    display: none !important;
    }

    • This topic was modified 10 years, 2 months ago by Effektid.
    #334467

    Hey Effektid!

    To manipulate the CSS at different display sizes, we recomment you use css media queries.

    The custom.css file inside the css folder your enfold theme root is a great starter file.

    You can also refer to these great guides for more advanced media query customisation:

    http://css-tricks.com/logic-in-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Cheers!
    Arvish

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.