PHP: How do you fix the fifth SQL item that has an abnormal alignment?

Question

I'm programming a website and I want four sections, then one below it aligned at the center.

On the site, there is a services section with 5 different services I want displayed. I am using PHP to pull the content from a MySQL database containing a services table with four rows and then filling in the boxes. I have tried changing the count number and arranging it a few different ways, but nothing seems to be working.

<div class="row pt-lg-3">
<div class="service-box col-md-1 col-sm-12 mt-lg-1 d-md-block d-none" style="max-width: 6%;">&nbsp;</div>
<?php
    include("mod_content/engine/qry_getservices.php");
    $num_rows  =   mysql_num_rows($GetServices);
    $counter   =   0;
    $class     =   'fadeInLeft mb-4';
    if($num_rows   > 0){
      while($row_services  =   mysql_fetch_array($GetServices)){
        if($counter++ == 2){
          echo '<div class="service-box col-md-1 col-sm-1 mt-lg-1">&nbsp;</div>
                <div class="service-box col-md-1 col-sm-12 mt-lg-1 d-md-block d-none" style="max-width: 6%;">&nbsp;</div>';
          $class     =   'mt-lg-3 fadeInRight mb-3';
        }
        echo '<div class="service-box col-xl-5 col-lg-5  col-md-5 col-sm-12 wow animated mb-md-2 '.$class.'">';
        if($row_services["Image"]!=""){
          echo '<img src="'.$HTTPServerIP.'Photo/'.$row_services["Image"].'" alt="'.$row_services["Title"].'">';
        } else{
          echo '<img src="'.$HTTPServerIP.'images/blank-image.jpg" alt="'.$row_services["Title"].'">';
        }
        echo '<div class="service-box-inner">';
        echo '<h4>'.$row_services["Title"].'</h4>';
        echo "<br>";
        echo '<p >'.$row_services["BriefDescription"].'</p>';
        echo '<a title="View Details" href="'.$HTTPServerIP.'services/'.$row_services["ServiceID"].'">Read More</a>';
        echo '</div>';
        echo '</div>';
      }
    }
?>

I want it to create four boxes, but then have the fifth box centered below them. Right now, it appears as four boxes, then an off centered fifth box at the bottom.

Here is link to the site with current problem. It is in the services section. This is more of a question about alignment.

Welcome to Stack Overflow! Please post your rendered HTML as well as any CSS for that specific section of your website. A link to your website will be useless to future visitors once you have it fixed. Please read: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — disinfor, Sep 11 '19 at 19:24
Possible duplicate of [Why shouldn't I use mysql\_\* functions in PHP?](https://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php) — Dharman, Sep 11 '19 at 19:50
@Dharman: How is this a duplicate of that? This question is about a visual alignment problem. — thirtydot, Sep 11 '19 at 19:59
The number of times this really is a duplicate makes me less likely to read into the actual question. I will retract my vote, but you should upgrade as a priority anyway. Read the link as it points out why you should do so. — Dharman, Sep 11 '19 at 20:02

Erik Nedwidek · Answer 1 · 2019-09-11T20:05:59.803

This code only runs after your first two service boxes are output.

             if($counter++ == 2){
                 echo '<div class="service-box col-md-1 col-sm-1 mt-lg-1">&nbsp;</div>
                       <div class="service-box col-md-1 col-sm-12 mt-lg-1 d-md-block d-none" style="max-width: 6%;">&nbsp;</div>';
                 $class     =   'mt-lg-3 fadeInRight mb-3';
             }

This change will make it execute after every two service boxes are output

             if($counter > 0 && $counter++ % 2 == 0){
                 echo '<div class="service-box col-md-1 col-sm-1 mt-lg-1">&nbsp;</div>
                       <div class="service-box col-md-1 col-sm-12 mt-lg-1 d-md-block d-none" style="max-width: 6%;">&nbsp;</div>';
                 $class     =   'mt-lg-3 fadeInRight mb-3';
             }

This change gets rid of the offset on your third row. It doesn't get your final service box centered.

It actually made it execute before the two rows of boxes where output. It is updated on the link I shared, but it nearly center aligned the single box at the top. It is still slightly off though. You can see it [here](https://www.ahcspc.com). Thanks for your help though. — wpursell, Sep 11 '19 at 20:03
Ah, sorry. That edit should keep the if clause from being executed when $counter is 0. — Erik Nedwidek, Sep 11 '19 at 20:07

score -1 · Answer 2 · answered Sep 11 '19 at 19:52

-1

Did you make sure to check how many div open and close tags there are. It looks like one close might be missing?

answered Sep 11 '19 at 19:52

Michael Hearn

557
6
18

Thanks for the response, but i did close both the divs at the bottom of the page, I just didn't include that part. – wpursell Sep 11 '19 at 19:56

PHP: How do you fix the fifth SQL item that has an abnormal alignment?

2 Answers2