Skip loading div content when on mobile device

I have 2 div classes: "desktop-only" and "mobile-only"

I am using to show some content only on desktop and hide it from mobile but it still loading the content just hide it from screen. That way it slow my page.

I am looking for solution to skip loading the content for example when I am on desktop to skip loading the mobile div and when I am on mobile to skip loading the desktop div. Any solutions ?

1 answer

  • answered 2017-11-12 19:43 Naman Kheterpal

    The elements can not be deleted via CSS from DOM.

    In JS you add add is some snippet like

    $( document ).ready(function() {
        if($(window).width()<=700){
            $('.desktop-only').remove();
        } else {
            $('.mobile-only').remove();
       }        
    });