Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 19, 2014 at 6:35 pm #353856
    bjconcan

    I need to display different content on mobile than on tablets or desktops. How do I do something like:

    (on mobile)
    Display Short text of a brief summary
    (end on mobile)
    (on everything not mobile)
    Display much longer text and/or HTML because I have
    more real estate to more fully describe something.
    Continue to develop the topic, adding a bunch more text.
    (end on everything not mobile)

    Thanks a ton. If you’ve covered this somewhere else, my apologies – I looked around and couldn’t find anything.

    November 19, 2014 at 10:26 pm #353996
    Elliott

    Hi bjconcan!

    You could do this with CSS. Surround your content with something like this.

    <span class = "mobile">
mobile content goes here
</span>
<span class = "desktop">
desktop content goes here
</span>

    And then add this to your custom CSS.

    .mobile { display: none; }
.desktop { display: block; }
@media only screen and (max-width: 479px) {
.mobile { display: block !important; }
.desktop { display: none !important; }
}

    Cheers!
    Elliott

    • This reply was modified 10 years ago by Elliott.
    November 20, 2014 at 3:50 pm #354294
    bjconcan

    Perfect, thanks so much Elliot!

    One more thing – anyway to hide the full-screen slider on mobile like the Layer-Slider option?

    November 20, 2014 at 10:37 pm #354532
    Elliott

    Hey!

    Try adding this.

    @media only screen and (max-width: 479px) {
.avia-layerslider { display: block !important; }
}

    Regards,
    Elliott

    January 9, 2015 at 3:32 pm #377383
    bjconcan

    Thanks – works great!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Controlling content on Mobile in the Enfold theme’ is closed to new replies.