0

possuo um formulário com duas características diferentes, uma para mobile e outra para desktop. Não sei como configurar para que uma seja apresentada e outra ocultada dependendo se o site está no desktop ou no mobile.

Lendo algumas respostas aqui do fórum tentei o seguinte:

<!-- 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 -->

Mas as duas versões estão sendo apresentadas tanto no desktop quanto no mobile.

3
  • Não pode usar CSS Media Queries?
    – Woss
    Commented 4/05/2017 às 21:38
  • edtei a resposta para atender seu pedido no comentário. Faça um teste e me retorne o resultado.
    – user60252
    Commented 5/05/2017 às 3:20
  • Se você estiver usando Bootstrap veja nessa resposta como é simples. Commented 5/05/2017 às 12:25

2 Respostas 2

3

trecho de código extraído da biblioteca bootstrap:

@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: coloquei a largura exata hidden-xs: esconde para celulares (<768px);

hidden-sm: esconde para tablets (≥768px);

hidden-md: esconde para desktops (>= 992px e < 1200px)

hidden-lg: esconde para desktops (>= 1200px)

informações também extraídas da documentação do bootstrap.

Veja mais em https://getbootstrap.com/css/

2
  • Legal Diego, onde posso incluir o código do formulário dentro conteúdo que enviou? Código Mobile: <?php get_template_part('inc_booking'); ?> Código Desktop: <div style="position: fixed; bottom: 0; width:1170px; text-align: center;"> <?php get_template_part('inc_booking'); ?> </div> Commented 5/05/2017 às 0:51
  • Em qualquer bloco ou folha de css. Espero ter ajudado, abraços Commented 8/05/2017 às 16:21
0

Já que sua página é 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

2
  • Obrigado Leo, onde posso incluir o código do formulário dentro conteúdo que enviou? Código Mobile: <?php get_template_part('inc_booking'); ?> Código Desktop: <div style="position: fixed; bottom: 0; width:1170px; text-align: center;"> <?php get_template_part('inc_booking'); ?> </div> Commented 5/05/2017 às 0:55
  • Esse get_template_part('inc_booking') é uma função né, então com javascript não vai rolar. Vou fazer com editar a resposta com PHP puro.
    – user60252
    Commented 5/05/2017 às 11:30

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .