Layout not fitting properly on mobile devices

Question

Layout not fitting properly on mobile devices

Asked 4 years, 2 months ago

Viewed 20 times

-1

I used a Media Query to make a responsive layout, which would look like this on the desktop:

And so on mobile:

The problem is that when I enter the site using the mobile phone the layout is not as it should, it uses the desktop layout and not the mobile one, as I solve?

Desktop media query is on line 127 and mobile on line 295

/*
Estilos e fontes globais
*/

*
{
	margin: 0px;
}

html
{
	background-image: url("../Imagens/Fundo.jpg");
}

a:link 
{
	color: #ECEEF4; 
	text-decoration: none;
}

a:visited
{
	color: #F3DAF7;
	text-decoration: none;
}

a:hover
{
	color: #92369C;
	text-decoration: none;
	transition: 0.2s;
}

@font-face
{
	font-family: Another Danger;
	src: url("../Fontes/Another Danger.otf")
}

@font-face
{
	font-family: Potra;
	src: url(../Fontes/Potra.ttf);
}

@font-face
{
	font-family: earthorbitersemital;
	src: url(../Fontes/earthorbitersemital.ttf);
}

@font-face
{
	font-family: pdark; 
	src: url("../Fontes/pdark.ttf");
}

.Bar
{
	width: 100%;
	background-image: url(../Imagens/BR1.png);
	background-size: 100% 100%;
	font-family: Another Danger;
	color: #ECEEF4;
	font-size: 25px;
	display: inline-flex;
}

.sla2
{
	padding-top: 2.5%;
	padding-bottom: 4.5%;
}

#sla1
{
	background-image: url(../Imagens/Sobrefundo.png);
	background-size: 100% 110%;
	background-position: center;
	background-repeat: no-repeat;

}

#sla
{

	font-family: earthorbitersemital;
	font-size: 35px;
	color: white;

	text-align: center;
	vertical-align: top;

	padding-right: 13.4%;
	padding-left: 13.4%;

}

#Ti1
{
	font-family: earthorbitersemital;
	font-size: 30px;
}

#st5
{
	font-family: Potra;
	font-size: 50px;
	text-align: center;
	color:#8EB8FC;
	padding-bottom: 50px;
}

	#Ti
	{
		font-family: Potra;
		font-size: 65px;
		color: white;
	}



/* 
Estilos unicos do desktop
*/

@media only screen and (min-width: 751px)
{

	.TDs
	{
		background-image: url(../Imagens/Fundop.png);
		background-size: 80% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.stt
	{
		font-family: pdark;
		font-size: 30px;
		color: #A5B2FB;
		display: inline-flex;
		width: 100%;
		height: auto;
		border-right: 11%;
		text-align:center;
	}

	.SN1
	{
		padding-right: 30.2%;
		padding-left: 11.6%;
	}

	.SN2
	{
		padding-right: 10%;
		padding-left: 0%;
	}

	.TI3
	{
		margin-left: 1.4%;
	}

	.ST4
	{
		padding-left: 3.7%;
	}

	.ST5
	{
		font-family: earthorbitersemital;
		font-size: 18px;
		color:#e0c6f7;
		width: 100%;
		margin-right: 1.1%;
	}

	.Cell2
	{
		padding-left: 1.5%;
	}

	.Cell1
	{
		padding-left: 7.5%;
	}

	.pula
	{
		padding-bottom: 80px;
	}

	.TDs1
	{
		background-image: url(../Imagens/Fundo1.png);
		background-position: center;
		background-repeat: no-repeat;
	}

	#stt1
	{
		text-align:center;
		font-family: pdark;
		font-size: 30px;
		color: #A5B2FB;
	}

	.TI
	{
		margin-left: 1%;
	}

	.letr
	{
		font-family: earthorbitersemital;
		font-size: 18px;
		color:#e0c6f7;
		padding-bottom: 0px;
		padding-top: 0px;
	}

	.txtb
	{
		padding-left: 13.5%;
	}




	.Tds2
	{
		background-image: url(../Imagens/Fundop.png);
		background-size: 0 0;
		background-position: center;
		background-repeat: no-repeat;
	}

	.stt3
	{
		font-family: pdark;
		font-size: 0;
		color: #A5B2FB;
		display: inline-flex;
		width: 0;
		height: auto;
		border-right: 0;
		text-align:center;
	}

	.SN12
	{
		padding-right: 0;
		padding-left: 0;
	}

	.TI32
	{
		margin-left: 0;
	}

	.ST52
	{
		font-family: earthorbitersemital;
		font-size: 0;
		color:#e0c6f7;
		width: 0;
		margin-right: 0;
	}

	.Cell22
	{
		padding-left: 0;
	}

	.Cell12
	{
		padding-left: 0;
	}

	.TI32
	{
		width: 0%;
	}
}



/* 
Estilos unicos do mobile
*/

@media only screen and (max-width: 750px) and (max-height: 700px)
{
	div.bar
	{
		display: block;
		text-align: center;
		font-size: 45px;
	}

	.txtb
	{
		padding-left: 0%;
	}	

	.Tds2
	{
		background-image: url(../Imagens/Fundop.png);
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.stt3
	{
		font-family: pdark;
		font-size: 30px;
		color: #A5B2FB;
		width: 100%;
		height: auto;
		border-right: 0;
		text-align:center;
	}

	.SN12
	{
		padding-right: 0;
		padding-left: 0;
	}

	.TI32
	{
		width: 90%;
	}

	.ST52
	{
		font-family: earthorbitersemital;
		font-size: 19px;
		color:#e0c6f7;
		margin-left: 5%;
	}

	.Tds
	{
		display: none;
	}

	.Tds1
	{
		display: none;
	}

}

<doctype html>
<html>

<head>
<title>WJ Photos </title>
<meta charset="utf-8">
<link rel="stylesheet" href="Css/teste.css">
</head>

<body>
	<div class="Bar">
				<p class="txtb"><a href="#Sist">Sistemas</a></p>

				<p class="txtb"><a href="TDSC.html">Corpos celestiais</a></p>

				<p class="txtb">Criaturas</p>

				<p class="txtb">Sobre</p>
	</div>

	<div class="sla2">
	<div id="sla1">
		<div id="sla">
			<p id="Ti">No Man's Sky registros</p>

			<p>Este site tem meus ultimos registros sobre o jogo No Man's Sky</p>

			<p id="Ti1">No Man's Sky é sobre explorar e sobreviver em uma galáxia infinita gerada processualmente</p>
		</div>
	</div>
	</div>


	<a name="Sist">
	<p id="st5"> Sistemas descobertos</p>

	<div class="TDs">
		<div class="stt">
			<p class="SN1">Nosmidi-Kur XVI</p>
			<p class="SN2">Aehola-Minusc V</p>
		</div>

			<div class="TI1">
				<img class="TI3" src="Imagens/SIS1.jpg" width="47.4%">
				<img class="TI3" src="Imagens/SIS2.jpg" width="47.4%">
			</div>

	<div class="ST4">
		<table class="ST5">
			<tr>
				<td>Corpos celestiais:</td>
				<td class="Cell2">4 planetas</td>
				<td class="Cell1">Corpos celestiais:</td>
				<td class="Cell2">4 planetas e 1 lua</td>
			</tr>
			<tr>
				<td>Raça dominante:</td>
				<td class="Cell2">Gek</td>
				<td class="Cell1">Raça dominante:</td>
				<td class="Cell2">Korvax</td>
			</tr>
			<tr>
				<td>Economia:</td>
				<td class="Cell2">Mercantil(Estado: Confortável)</td>
				<td class="Cell1">Economia:</td>
				<td class="Cell2">Matemático(Estado: Sustentável)</td>
			</tr>
			<tr>
				<td>Nível de conflito:</td>
				<td class="Cell2">Pacífico</td>
				<td class="Cell1">Nível de conflito:</td>
				<td class="Cell2">Inofensivo</td>
			</tr>
		</table>
	</div>
	</div>

	<p class="pula"></p>

	<div class="TDs1">
		<p id="stt1">Ubliku IX</p>
		<table class="TI">
			<td rowspan="4"><img src="Imagens/SIS3.jpg" width="100%"></td>
			<td class="letr">Corpos celestiais:       6 planetas</td>
		</tr>
		<tr>
			<td class="letr">Raça dominante:       Gek</td>
		</tr>
		<tr>
			<td class="letr">Economia:       Experimental(Estado: Falhando)</td>
		</tr>
		<tr>
			<td class="letr">Nível de conflito:       Estável</td>
		</tr>
	</table>
</div>

	<div class="asd">
	<div class="TDs2">
		<div class="stt3">
			<p class="SN12">Nosmidi-Kur XVI</p>
			<img class="TI32" src="Imagens/SIS1.jpg">
				<table class="ST52">
					<td>Corpos celestiais:</td>
					<td>4 planetas</td>
					<tr>
					<td>Raça dominante:</td>
					<td>Gek</td>
					</tr>
					<tr>
					<td>Economia:</td>
					<td>Mercantil(Confortável)</td>
					</tr>
					<tr>
					<td>Nível de conflito:</td>
					<td>Pacífico</td>
					</tr>
				</table>
			</div>
	</div>
</div>

	</a>
</body>

Background image

Example image for all items

(If I used some wrong term or something, I’m sorry, I’m new in the area, I program just a month, I still lack practice)

1 answer

Browser other questions tagged css media-queries

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

by user187043 · Answer 1 · 2020-04-27T20:04:17+00:00

Add the following tags to your HTML:

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

<meta http-equiv="x-ua-compatible" content="ie=edge">