Olá
Estou a tentar distribuir os resultados provenientes da BD em linhas com 3 resultados de cada vez, tal como vemos em diversas lojas online, mas a formatação sai bastante desorganizada.
Ainda tentei fazer uma abertura de 3 resultados através de uma clausula If,mas tal como disse acima sai mal formatado. Por exemplo, os 3 primeiros resultados tem os paragrafos quase em cima das imagens. No 4º resultado é que o div "is-inside" fica bem formatado.
Já estou há bastantes horas de volta disto e já não faço nada de jeito.
Eis o meu codigo na página country.php:
<!DOCTYPE html>
<html>
<head>
<title>Great Train Journeys</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/country.css" rel="stylesheet" type="text/css"/>
<link href="css/footer.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="js/country.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald"
rel="stylesheet">
</head>
<body>
<?php
include_once 'mod_menu.php';
include_once 'php/includes/constants.php';
?>
<div class="overlay">
<section id="country_img">
<?php
$sql_img = "SELECT * FROM countries WHERE country_id = ".
$_GET['countryPage_id']." ";
$result_img = mysqli_query($mysqli, $sql_img);
while($row_img = mysqli_fetch_assoc($result_img)){
?>
<img src="<?php echo $site_root; ?>/images/country_header_images/<?php
echo $row_img['header_img'] ?>" alt=""/>
<h3><?php echo $row_img['country_name']; ?></h3>
</section><!-- End of country_img section-->
<a href="#" id="backgroundButtonUp"><span id="buttonUp"></span></a>
<section id="about">
<div id="introCountry">
<?php echo $row_img['intro']; ?>
</div>
<section class="featured">
<div class="is-featured">
<?php
$abreLista = false;
$contador = 0;
$sql_journeys = "SELECT * FROM country_page_journeys WHERE countryPage_id =
".$row_img['country_id']." ORDER BY journeys_id";
$result_journeys = mysqli_query($mysqli, $sql_journeys);
while($row_journeys = mysqli_fetch_assoc($result_journeys)){
$contador++;
if($abreLista) {
$contador = 0;
$abreLista = false;
?>
<div class="is-inside">
<?php
}
?>
<a href="" class="is-link">
<figure class="is-img">
<img src="<?php echo $site_root; ?>/images/Thumbnails_journey/<?
php echo $row_journeys['thumbnail']; ?>"/>
</figure>
<h2 class="is-h2"><?php echo $row_journeys['titulo']; ?></h2>
</a>
<p class="is-p"><?php echo $row_journeys['resumo']; ?></p>
<?php
if($contador == 3) {
$abreLista = true;
?>
</div>
<?php
}
}
}
?>
</div>
</section>
</section>
<?php
require_once 'mod_footer.php';
?>
</div>
</body>
</html>
E o CSS (country.css) desta página é o seguinte (Coloquei os estilos a partir da section "featured", o restante pertence a outros elementos na página):
.featured {
display: block;
margin-bottom: 4%;
}
.is-featured {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 2%;
position: relative;
width: 100%;
}
.is-inside {
display: table;
padding: 0;
margin: 0;
width: 30%;
}
.is-link {
display: block;
text-decoration: none;
}
.is-link:hover {
opacity: 0.9;
}
.is-img {
display: block;
margin: 5%;
}
.is-inside img {
display: block;
height: auto;
width: 100%;
}
.is-h2 {
color: black;
display: inline;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
padding: 1% 0;
}
.is-h2::after {
border-bottom: 7px black solid;
content: '';
display: block;
margin: 0 auto;
padding-top: 5%;
position: relative;
width: 45px;
}
.is-p {
font-family: 'Oswald', sans-serif;
font-size: 0.9rem;
font-weight: 400;
font-style: italic;
margin-top: 5%;
}
P.S: Quando fiz este codigo, ainda não tinha aprendido a usar Prepared Statements. Irei mudar o código depois de resolver este problema. Obrigado