How to divide the results from the comic into different lines as in an online store

Question

How to divide the results from the comic into different lines as in an online store

Asked 7 years, 4 months ago

Viewed 41 times

0

Hello

I’m trying to distribute the results from the comic in lines with 3 results at a time, as we see in several online stores, but the formatting comes out quite disorganized.

I still tried to make an opening of 3 results through an If clause, but as said above comes out badly formatted. For example, the first 3 results have the paragraphs almost on top of the images. In the fourth result is that the div "is-Inside" is well formatted.

I’ve been around for hours and hours and I can’t do anything right.

Here’s my code on the page 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>

And the CSS (country css.) of this page is as follows (I put the styles from the "featured" Section, the rest belongs to other elements on the page):

.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%;
}

Q.S.: When I made this code, I had not yet learned how to use Prepared Statements. I will change the code after solving this problem. Thank you

1 answer

Browser other questions tagged php mysql

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

by Roberto de Campos • **5,345** points · Answer 1 · 2017-07-26T18:23:30+00:00

Is missing you close to div .is-inside, try this way:

    $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">
            <?
        }
    ?>
    <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"><? echo $row_journeys['resumo']; ?></p>   
    <?
        if($contador == 3) {
            $abreLista = true;
            ?>
                </div>
            <?
        }
    ?>
    </div>
</div>