How do I configure @media for mobile?

Question

How do I configure @media for mobile?

Navigation

#1 by (1 votes)

1

I have a Moto G phone and I can not set @media to work for it.

Reducing the width of the browser works perfectly, but in the mobile device it does not adjust according to @media .

Below I put the form background to gray, and nothing happens. See what I did?

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

html5 css3

asked by anonymous 27.06.2017 / 17:43

1 answer

alignment of text and an image JavaScript - formatMoney - How to use

score 1 · Answer 1

I have tested your code without any modification and it is working correctly.

As you did not send all the code, the only thing I did was add a head and finish the code with the bootstrap default, I'll send it down for you to see and check.

You need to verify that you are importing the css correctly, okay?

I hope I have helped, reminding you that you need to test on the resolution you are proposing in @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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>