Adjustable design for mobile

Asked

Viewed 182 times

2

I would like to know what I am doing wrong, I want when the user enters my site by mobile, change some dimensions of my page, background and other things that I will change..

@media screen and (max-width: 480px){
div#container {
    background-color: red;
    margin: 2% 0 2% 0;
}
}

#container {
	background-color: silver;
	margin: 2% 12% 2% 12%;
	padding: 2% 5% 2% 5%;
	color: #252525;
}
<!DOCTYPE html>
<html lang="PT-BR">
<head>
	<title></title>
		<link rel="stylesheet" href="_css/estilo.css"/>
			<meta charset="UTF-8"/>
</head>
<body>

<div id="container">

<p> aqui eu tenho alguns parágrafos no meu site..</p>

<p>porém visto pelo celular fica muito pequeno ou as margens ficam muito grande, queria que se tornasse responsivo</p>
</div>
</body>
</html>

Note: I’ve looked at other topics related here on the site but in practice I could not, so I decided to post. I thank you already!

html css

  • Good morning! Since the solution presented by Alexandre did not work. Make sure there is no css of greater importance overwriting yours. Test part of your code by placing the ! Import.

  • I recommend using the framework bootstrap

4 answers

2

try using bootstrap : http://getbootstrap.com/ will help you a lot!

Using these links, you’ll be adding boostrap to your code so you can use the same classes to make your code responsive, more information: http://getbootstrap.com/ 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

0

Inside the tag <head> You have to put the following code:

<meta name="viewport" content="width=device-width" initial-scale="1.0">

You can also use Bootstrap to make websites responsive.

Website of the Bootstap

0

As far as I can tell, no reference was made to the bootstrap library. Take a look at this documentation and add this reference to the page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" />

Also change the media query in this way:

/* Dispositivos pequenos (tablets, 768px e superiores) */
@media (min-width: @screen-sm-min) { 
        #container {
        background-color: red;
        margin: 2% 0 2% 0;
       }
     }

/* Dispositivos médios (desktops, 992px e superiores) */
@media (min-width: @screen-md-min) { 
 #container {
    background-color: silver;
    margin: 2% 12% 2% 12%;
    padding: 2% 5% 2% 5%;
    color: #252525;
 } 
}

/* Dispositivos grandes (desktops grandes, 1200px e superiores) */
@media (min-width: @screen-lg-min) { 
 #container {
    background-color: silver;
    margin: 2% 12% 2% 12%;
    padding: 2% 5% 2% 5%;
    color: #252525;
  }
 }

  • added, but not modified yet friend.

  • I also put a change in your media query. See now

  • And includes the other screen sizes for the alternate layout

  • I changed the media query and it still didn’t work

0

The error is quite simple, adds a meta tag, to control the opening in the browser.

<meta name="viewport" content="width=device-width" initial-scale="1.0">

This makes the mobile browsers behave like desktop browsers, which is very common when we are making a responsive layout, do not even have to worry about the meanings of this meta tag, just put in all the layouts that will do.

Browser other questions tagged html css

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