1

Tenho um celular Moto G e não consigo definir o @media para funcionar para ele.

Reduzindo a largura do navegador funciona perfeitamente, mas no dispositivo celular não se ajusta de acordo com o @media.

Abaixo coloquei o background do form para ficar cinza, e nada acontece. Veja o que fiz?

@media(max-width: 574px) {
.menutopo{
  display: none;
}
figure.logo{
  float: left;
  width: 100%;
  height: 80px;
  background-color: #FF8922;
  box-sizing: border-box;
}

section.frmbuscaguia{
  float:left;
  width: 100%;
  min-width: 200px; 
  height: auto;
  background-color: #ccc;
  text-align: center;
  margin-bottom: 5px;
  box-sizing: border-box;
}
}

HTML

<figure class="logo">
            <p class="text-center"><img src="./imagens/logo.png" align="center"></p>
        </figure>


            <section class="frmbuscaguia">
            <h1>Buscar no Guia Comercial</h1>
            <form>
                <input type="text" name="buscar">
                <button type="submit">Pesquisar</button>
            </form>
            </section>
8
  • já tentou @media screen and ()...?
    – RFL
    27/06/2017 às 15:52
  • sim, já tentei!
    – Gladison
    27/06/2017 às 15:57
  • Se for o chrome, so vai funcionar se limpar o histórico do navegador. 27/06/2017 às 16:05
  • Já tentou o @media only screen and (max-width: 574px)... ?
    – Enio
    27/06/2017 às 16:16
  • @Newtech mas nada de funcionar
    – Gladison
    27/06/2017 às 16:39

1 Resposta 1

1

Eu testei seu código, sem nenhuma modificação e está funcionando corretamente.

Como você não enviou todo o código, a única coisa que eu fiz foi acrescentar um head e finalizar o código com o próprio padrão do bootstrap, vou mandar abaixo para você ver e conferir.

Você precisa verificar se está importando corretamente o css, ok?

Espero ter ajudado, lembrando que você precisa testar na resolução que está propondo no @media.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="css/style.css">
	<style>
	</style>
</head>

<body>

	<figure class="logo">
		<p class="text-center"><img src="./imagens/logo.png" align="center"></p>
	</figure>

	<section class="frmbuscaguia">
		<h1>Buscar no Guia Comercial</h1>
		<form>
			<input type="text" name="buscar">
			<button type="submit">Pesquisar</button>
		</form>
	</section>

	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

2
  • Cumprimentar é bom e muito educado, mas no Stack Overflow costumamos ser o mais breve e direto possível, não precisa enviar abraços nem dizer olá. Mesmo assim, essa é uma boa resposta. 21/10/2018 às 10:10
  • 1
    hehe é costume de ser cordial sempre, mas valeu pela dica! 22/10/2018 às 10:49

Você deve fazer log-in para responder a esta pergunta.

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