CODEWITHSUNDEEP
phphtmlcss
hafiz.bhuyan
hafiz.bhuyan

Reputation: 43

How can I have search results fill the page?

I created my own search function on our website. It uses a simple php script that searches through our database to find what the users are looking for. The search results page doesn't fill the width of the page and the results are displayed vertically, one by one.

The code that displays the results.

        $count = 0;
        while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            $t = $count%3;

            echo ($t == 2) ? "<div class='col-md-4'>" : "<div class='col-md-4'>";
            echo "<div class='card mb-4 shadow-sm'>";
            echo "<img class='img-thumbnail' width='300px' src='".$row['image']."'>";
            echo "<div class='card-body'>";
            echo "<p class='card-text'>".$row['title'] ."<br>".$row['isbn']."</p>";
            echo "<div class='d-flex justify-content-between align-items-center'>";
            echo "<div class='btn-group'>";
            echo "<a href='".$row['url']."'>Start Reading</a>";
            echo "</div>";
            echo "</div>";
            echo "</div>";
            echo "</div>";
            echo "</div>";

            $count++;

How can I get the results to fill the width of the page?

Upvotes: 0

Views: 200

Answers (2)

lbrandao
lbrandao

Reputation: 4373

It seems you are using Bootstrap CSS framework. If you want to keep using that, you might want to understand how the grid works by reading this page: https://getbootstrap.com/docs/4.5/layout/grid/

I didn't test your code, but the fact that you are using the class col-md-4 is probably why it's not taking the whole width of the page (the result depends on the parent container of the code you are generating, which you didn't show).

So go ahead and remove the class col-md-4 to see what happens.

Upvotes: 1

user12526638
user12526638

Reputation:

I think that you have a few experiece working with the front-end or client side (html, css, javascript).

I see that you only uses div containers, i recomend you see the diferences between inline and block html's elemtens.

The div is an block element that always starts on a new line and takes up the full width available.

An inline element does not start on a new line and only takes up as much width as necessary. An example is the span tag.

You should read these articles:

https://www.w3schools.com/html/html_blocks.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Also i recomend you to learn how to use the navigator console that show you the with and height of all of your html tags and more util information.

Upvotes: 1

Related Questions