Adjustable design for mobile

Question

Adjustable design for mobile

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I would like to know what I'm doing wrong, I want it when the user enters my site through the mobile phone, 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 already looked at other topics related here on the site but in practice I could not, so I decided to post. Thank you in advance!

html css

asked by anonymous 14.09.2017 / 19:46

4 answers

Create new node in Firebase How to prevent a variable from getting negative in Java?

score 1 · Answer 1

try using bootstrap: link will help you a lot!

Using these links you will be adding the boostrap in your code so you can use the classes of the same making your code responsive, more information go to: link

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

score 0 · Answer 2

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

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

Also change the media query 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;
  }
 }

score 0 · Answer 3

The error is very 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 mobile browsers behave like desktop browsers, which is very common when we are doing a responsive layout, do not even have to worry about the meanings of that meta tag, just put in all the layouts you are going to do .

score 0 · Answer 4

Within 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 responsive sites.

Bootstap Website