Show content in the desktop version and hide it in the mobile version. And vice versa [duplicate]

Navigation
0

I have a form with two different characteristics, one for mobile and one for desktop. I do not know how to configure one to show and one to hide depending on whether the site is on the desktop or mobile.

Reading some answers here from the forum I tried the following: 

<!-- aparecer no desktop -->
<div class="mobile-hide">
  ------------------------------------------
  <div style="position: fixed; bottom: 0; width:1170px; text-align: center;">
    <?php get_template_part('inc_booking'); ?>
  </div>
  código do 1° formulário, sem necessidade de alteração 
  ------------------------------------------
</div>
<!-- /aparecer no desktop -->

<!-- aparecer no mobile -->
<div class="mobile">
  <div class="desktop-hide">
  ------------------------------------------
    <?php get_template_part('inc_booking'); ?>
  </div>
  código do 2° formulário, sem necessidade de alteração 
  ------------------------------------------
</div>
<!-- /aparecer no mobile -->

But the two versions are being presented both on the desktop and on the mobile.

    
asked by anonymous 04.05.2017 / 22:05

2 answers

3

code snippet extracted from the bootstrap library: 

@media (max-width: 767px) {
    .hidden-xs {
        display: none!important
    }
}
@media (min-width: 768px)and (max-width: 991px) {
    .hidden-sm {
        display: none!important
    }
}
@media (min-width: 992px)and (max-width: 1199px) {
    .hidden-md {
        display: none!important
    }
}
@media (min-width: 1200px) {
    .hidden-lg {
        display: none!important
    }
}

edit: put the exact width hidden-xs: hides for mobile (

04.05.2017 / 22:16
0
  

Since your page is PHP .... 

<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Qualquer dispositivo móvel (telefones ou tablets).
if ( $detect->isMobile() ) {
    echo ("<div class=\"mobile\"><div class=\"desktop-hide\">".get_template_part('inc_booking')."</div></div>");
}else{
    echo ("<div class=\"mobile-hide\"><div style=\"position: fixed; bottom: 0; width:1170px; text-align: center;\">".get_template_part('inc_booking')."</div></div>");
}
?>

Mobile_Detect.php

    
04.05.2017 / 23:33
How to mount an includes system with $ _GET How to apply this scroll function? [closed]