Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou fazendo um menu de cardápio, utilizando TAB. OBS: peguei o código pronto na net, farei a devida customização posteriormente)
Dentro da TAB eu tenho uma TABLE(tabela), onde cada linha deve conter 4 colunas.
Coluna 1: Foto do Item - Coluna 2: Descrição Coluna 3: Foto do Item - Coluna 4: Descrição
Quando abro minha página no celular, a foto fica minuscula, e a descrição fica comprimida e mais vertical.
Ficando foto - descrição e ao lado novamente foto - descrição
Ou seja, de certa forma, está responsivo, por isso da palavra entre parenteses no título.
Gostaria que a foto ficasse em um tamanho visível, com sua descrição abaixo, e a foto seguinte junto cem sua descrição, fossem jogadas pra baixo.
Segue abaixo. Lembrando que essa tabela dentro das tabs esta no corpo de uma página em Wordpress.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>* {
box-sizing: border-box;
}/ Style the tab /
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}/ Style the buttons inside the tab /
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
width: 33%;
}/ Change background color of buttons on hover /
.tab button:hover {
background-color: #ddd;
}/ Create an active/current tablink class /
.tab button.active {
background-color: #ccc;
}/ Style the tab content /
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}@media only screen and (max-width:500px) {
/ For mobile phones: /
.tab, .tab button, {
width: 100%;
}
}
</style>
</head>
<body>
<p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
<table border="0" width="100%">
<tr>
<td style="width:25%; ">
<img src="https://cctst.000webhostapp.com/wp-content/uploads/2018/11/pizza.jpg" alt="kibe" style="width:100%;"></td>
<td style="width:25%;">
<h3 style="margin-top:0px; margin-bottom:0px;">Kibe</h3>
<p style="margin-top:0px; margin-bottom:0px;">[Descrição] – Kibe de carne, temperada com ervas</p>
<p style="margin-top:0px; margin-bottom:0px;">(cento) R$50 (unidade) R$2</p>
</td>
<td style="width:25%;">
<img src="https://cctst.000webhostapp.com/wp-content/uploads/2018/11/Hot-Dogs.jpg" alt="coxinha" style="width:100%;">
</td>
<td style="width:25%;">
<h3 style="margin-top:0px; margin-bottom:0px;">Coxinha</h3>
<p style="margin-top:0px; margin-bottom:0px;">[Descrição] – Coxinha de Frango, temperada com ervas</p>
<p style="margin-top:0px; margin-bottom:0px;">(cento) R$50 (unidade) R$2</p>
</td>
</tr>
</table>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
Imagem - [COMO FICA](https://app-1537911333.000webhostapp.com/wp-content/uploads/2018/11/615.png)
Imagem - [COMO DEVERIA FICAR](https://app-1537911333.000webhostapp.com/wp-content/uploads/2018/11/616.png)
Já tentei de tudo, modifiquei width de colunas, utilizei float, coloquei um código no topo, dentro de style que diz ser voltado para telas de celular e também sem resultado.
Acredito que seja algo bem simples pois ao testar o float, uma das imagens minusculas, mudou de tamanho, mas o conteúdo não vai pra linha seguinte, fica todo aglutinado.
Desde já agradeço.Carregando comentários...