br automatic in mobile version

Question

br automatic in mobile version

Navigation

#1 by (1 votes)

2

Hello, I have a question, I have a page that is in a provider that when the user exhausts the internet it is presented! But I wanted the images and buttons to buy new packages in the mobile version were placed vertically rather than horizontally! And wanted to leave like this in the desktop version (horizontally)! Can someone give me a north? Thanks!

*{
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Montserrat', sans-serif;
}
div#barra{
	background: rgba(0,0,0,0.8);
}
div#barra h1{
	text-align: center;
	padding: 5px;
	color: #fff;
}
div#text-a{
	background: linear-gradient(to bottom, #ebebeb, #ccc);
}
div#text-a p{
	text-align: center;
	padding: 10px;
}
div#text-a a{
	color: #000;
}
div#barra-pacs{
	background: rgba(0,0,0,0.8);
}
div#barra-pacs h1{
	text-align: center;
	padding: 5px;
	font-size: 23px;
	color: #fff;
}
.btn{
	color: #000;
}
.b{
	display: none;
}

<!DOCTYPE html>
<html>
<head>
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
	<title>Comprar NET</title>
	<link rel="stylesheet" type="text/css" href="css/loja.css">
</head>
<body>
<div id="barra">
<h1>IMM | Comprar NET</h1>
</div>
<div id="area">
<div id="text-a">
<p>Verificamos que atingiste o teu limite de dados, se quiseres continuar a navegar gratuitamente mas a uma velocidade de 127kb/s, <a onClick="freenet()" href="javascript:void();">Clica aqui!</a> Caso queiras continuar a navegar sem limites de velocidade compra um pacote abaixo!</p>
</div>
<div id="barra-pacs">
<h1>Pacotes</h1>
</div>
<div id="tabela">
<center>
<table>
	<tr>
		<td><img src="https://image.ibb.co/eCrWXz/5gb.jpg"title="5GB" alt="5GB" width="300" height="460" /></td>
		<td><img src="https://image.ibb.co/kWZwze/30gb.jpg"title="30GB" alt="30GB" width="300" height="460" /></td>
		<td><img src="https://image.ibb.co/essS5K/50gb.jpg"title="50GB" alt="50GB" width="300" height="460" /></td>
	</tr>
	<tr>
		<td><center><a class="btn" href="#">Comprar</a></center></td>
		<td><center><a class="btn" href="#">Comprar</a></center></td>
		<td><center><a class="btn" href="#">Comprar</a></center></td>
	</tr>

</table>
</center>
</div>
</div>
</body>
</html>

html css

asked by anonymous 31.08.2018 / 15:15

1 answer

What is the difference of putting -g in the package installations by npm, webpack, etc ...? How to set the number of exponent numbers in scientific notation in C ++

score 1 · Accepted Answer

You need to create a @media rule to control how everything behaves on the mobile and the desktop.

The template I made is pretty basic, and as you used table and not a grid with divs for example the solution I found was creating two tables, one for mobile class .mobi and another pada desktop class .desk

Then I made a @media rule to only show the .mobi table when the screen is small. Display the example below as "All Page" to see that on the larger screen the .desk table appears at .mobi some.

*{
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Montserrat', sans-serif;
}
div#barra{
	background: rgba(0,0,0,0.8);
}
div#barra h1{
	text-align: center;
	padding: 5px;
	color: #fff;
}
div#text-a{
	background: linear-gradient(to bottom, #ebebeb, #ccc);
}
div#text-a p{
	text-align: center;
	padding: 10px;
}
div#text-a a{
	color: #000;
}
div#barra-pacs{
	background: rgba(0,0,0,0.8);
}
div#barra-pacs h1{
	text-align: center;
	padding: 5px;
	font-size: 23px;
	color: #fff;
}
.btn{
	color: #000;
}
.b{
	display: none;
}
.mobi {
	display: none;
}
/* regras para mobile abaixo de 922px entra a tabela mobile e some a desk*/
@media screen and (max-width: 922px) {
    .mobi {
		display: table;
	}
    .desk {
		display: none;
	}
}

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

<div id="barra">
<h1>IMM | Comprar NET</h1>
</div>
<div id="area">
<div id="text-a">
<p>Verificamos que atingiste o teu limite de dados, se quiseres continuar a navegar gratuitamente mas a uma velocidade de 127kb/s, <a onClick="freenet()" href="javascript:void();">Clica aqui!</a> Caso queiras continuar a navegar sem limites de velocidade compra um pacote abaixo!</p>
</div>
<div id="barra-pacs">
<h1>Pacotes</h1>
</div>
<div id="tabela">
<center>
<table class="desk">
	<tr>
		<td><img src="https://image.ibb.co/eCrWXz/5gb.jpg"title="5GB" alt="5GB" width="300" height="460" /></td>
		<td><img src="https://image.ibb.co/kWZwze/30gb.jpg"title="30GB" alt="30GB" width="300" height="460" /></td>
		<td><img src="https://image.ibb.co/essS5K/50gb.jpg"title="50GB" alt="50GB" width="300" height="460" /></td>
	</tr>
	<tr>
		<td><center><a class="btn" href="#">Comprar</a></center></td>
		<td><center><a class="btn" href="#">Comprar</a></center></td>
		<td><center><a class="btn" href="#">Comprar</a></center></td>
	</tr>

</table>
</center>
<center>
<table class="mobi">
	<tr>
		<td><img src="https://image.ibb.co/eCrWXz/5gb.jpg"title="5GB" alt="5GB" width="300" height="460" /></td>
	</tr>
	<tr>
		<td><center><a class="btn" href="#">Comprar</a></center></td>
	</tr>
	<tr>
		<td><img src="https://image.ibb.co/kWZwze/30gb.jpg"title="30GB" alt="30GB" width="300" height="460" /></td>
	</tr>
	<tr>
		<td><center><a class="btn" href="#">Comprar</a></center></td>
	</tr>
	<tr>
		<td><img src="https://image.ibb.co/essS5K/50gb.jpg"title="50GB" alt="50GB" width="300" height="460" /></td>
	</tr>
	<tr>
		<td><center><a class="btn" href="#">Comprar</a></center></td>
	</tr>

</table>
</center>

</div>
</div>

OBS 1 : Also add the "viewport" meta within the <head> of your document to work!

OBS 2: <br> is not for this, and since you used table tr td the br will not work because it does not break the tr td structure of the table