How do I set up @media for mobile?

Asked

Viewed 1,305 times

1

I have a cell phone Moto G and I can’t define the @media to work for him.

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

Below I put the background of form to turn gray, and nothing happens. Look 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

  • have tried @media screen and ()...?

  • yes, I’ve tried!

  • If Chrome, it will only work if you clear your browser history.

  • Have you tried the @media only screen and (max-width: 574px)... ?

  • @Newtech but nothing working

  • Set the tag <meta name="viewport" content="width=device-width, user-scalable=no"> in the <head>?

  • Post an image of how the page is looking on the mobile screen. Check if the meta tag viewport is configured

  • Just for the record, I ran some tests here and it’s very likely that your problem is the viewport itself, use the <meta name="viewport"> that Bruna posted in the answer that you will solve the problem. And to understand why you decided to read this article https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Show 3 more comments

1 answer

1

I tested your code, without any modifications and it’s working properly.

Since you didn’t send all the code, the only thing I did was add a head and finish the code with the bootstrap’s own pattern, I’ll send it down for you to see and check.

You need to check if you are importing css correctly, ok?

I hope I’ve helped by reminding you that you need to test the resolution you’re proposing on @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>

  • Greeting is good and very polite, but in Stack Overflow we usually be as brief and direct as possible, no need to send hugs or say hello. Still, that’s a good answer.

  • 1

    hehe is customary to be cordial always, but thanks for the tip!

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.