Home Forums Weaver Xtreme Theme HTML Insertion Code – Hide on mobile phones

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #17839
    KZraik
    Participant

    I added some code into the HTML Insertion Code tab. How do I hide particular sections on mobile view? (i.e. “Top Container”)

    #22395
    scrambler
    Moderator

    Use the [show_if] or [hide_if] shortcode as explained in the Add Ons page

    #22396
    KZraik
    Participant

    I answered my own question: See link at bottom

    Show content on mobile devices.

    To insert text or images specifically for mobile on your page, simple add the following code in the HTML <body>:

    <div class="mobileShow">
    TEXT OR IMAGE FOR MOBILE HERE
    </div>

    This div will declare that this copy will respond only when the class is triggered. By adding the code below, the class will only be triggered when the user is on a mobile device. Add the following code in the HTML <head> section of your page:

    <style type="text/css">
       .mobileShow {display: none;}
       /* Smartphone Portrait and Landscape */
       @media only screen
       and (min-device-width : 320px)
       and (max-device-width : 480px){ .mobileShow { display: inline;}}
    </style>

    Hide content on mobile devices.

    To hide certain text or images that will not display on mobile devices, you will add similar code as before in your HTML <body>:
    <div class=”mobileHide”>
    TEXT OR IMAGE NOT FOR MOBILE HERE
    </div>
    Then, you will want to add the following code to your HTML <head> section:
    <style type=”text/css”>
    .mobileHide { display: inline;}
    /* Smartphone Portrait and Landscape */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){  .mobileHide { display: none;}}
    </style>

    If you want this styling to apply to your entire website, add the following to your CSS stylesheet:
    .mobileHide
    { display: none;}

    #22397
    scrambler
    Moderator

    This also works if you don’t mind doing the HTML 🙂

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