Automatic br in mobile version

Asked

Viewed 46 times

2

Hello, I have a question, I have a page that stays in a provider that when the user depletes the internet it is presented! But I wanted the images and buttons to buy new packages in the mobile version to be placed vertically and not horizontally! And wanted to leave like this in desktop version(horizontal)! 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

  • Our, in portugal the Broadband internet has data limit or this is mobile internet?

  • Does not have is unlimited, this is mobile internet (USB modem)

1 answer

1


Dude you need to make a rule @media to control how everything behaves on mobile and desktop.

The model I made is pretty basic, and how 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 desktop class pada .desk

Then I made a rule @media to only show the table .mobi when the screen is small. Display the example below as "Whole Page" to see that on the larger screen the table .desk appears to .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 include the meta tag "viewport" within the <head> of your document to work!

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

Browser other questions tagged html css

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