Home Forums how to make Css compatible with mobile & Tablets or how to make layout responsiv

This topic contains 1 reply, has 1 voice, and was last updated by  Jigesh Raval 1 year, 4 months ago.

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

    Jigesh Raval
    Participant

    if you are using default buddypress theme than it is already having responsive layout , if you are newbie than you can learn how they are providing responsiveness for the mobile users , just see their Css structure, i haven’t seen but may be based on screen size OR the best way is track mobile device and provide a different css for mobile users , to simplify above let me do one thing

    Download : https://github.com/serbanghita/Mobile-Detect/releases/tag/2.6.6 -its a mobile detect script , don’t worry you just need Mobile_Detect.php file and place it in the server and add one line in starting <head> tab as

    <?php include_once(“./Folder_name/Mobile_Detect.php”);
    $detect = new Mobile_Detect;
    ?>

    now add an condition such as,

    <?php if ($detect->isMobile()) {
    ?><link href=”/Css/Mobile.css” rel=”stylesheet” type=”text/css” /><?php //this will be load when mobile device
    }
    else if ($detect->isTablet()) {
    ?><link href=”/Css/Tablet.css” rel=”stylesheet” type=”text/css” /><?php //this will be load when tablet device
    }
    else
    {
    ?><link href=”/wp-content/themes/Your_theme_name/_inc/css/default.css” rel=”stylesheet” type=”text/css” /><?php //this will be load when no mobile no tablet means desktop
    }

    ?>

    hope above thing will help someone.

    thanks.

    #736 Reply

    Jigesh Raval
    Participant

    above thread is for buddypress users but it can be used for any web layout using any platform,

    hope this helps, thanks.

Viewing 2 posts - 1 through 2 (of 2 total)
Reply To: how to make Css compatible with mobile & Tablets or how to make layout responsiv
Your information:





<a href="" title="" rel="" target=""> <blockquote cite=""> <code> <pre> <em> <strong> <del datetime=""> <ul> <ol start=""> <li> <img src="" border="" alt="" height="" width="">