Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS grid styling items from store

220061

Well-Known Coder
I have been trying to style the items from my store right now I have this code
CSS:
    <style>
        header{
            background-image: url("brood.jpg");
        }
        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
        }
         section{
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* you can change 1fr to whatever you want, 200px for example*/
            gap: 2rem;
            background-color: orange;
        }

        .card{
            height: 20%;
        }

        #myBtn {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 30px;
            z-index: 99;
            font-size: 18px;
            border: none;
            outline: none;
            background-color: black;
            color: white;
            cursor: pointer;
            padding: 25px;
            border-radius: 50px;
        }

        #myBtn:hover {
            background-color: #555;
        }

    </style>
    <body>
    <?php

    
      
        
        include "config.php";

        $sql  = 'SELECT * FROM broodjes';
        $stmt = $conn->prepare($sql);
        $stmt->execute();
        $result = $stmt->get_result(); // get the mysqli result

        echo '<section class="py-5">';

        while($row = mysqli_fetch_assoc($result)){
            //echo '<div class="grid">';
                echo '       
                
                <div class="px-4 px-lg-5 mt-5">
                    <div class="row gx-4 gx-lg-1 row-cols-2 row-cols-md-2 row-cols-xl-1 ">
                        <div class="col mb-5">
                            <div class="card h-100">
                                <!-- Product image dit kan later nog wel-->
                                <div class="fw-image">
                                    <img class="card-img-top" src="brood.webp" alt="brood foto" />
                                </div>
                                <!-- Product details-->
                                <div class="card-body p-4">
                                    <div class="text-center">
                                        <div class="broodjes_ID">
                                        <input type="hidden" name="broodjes_ID" value='. $row['broodjes_ID'] . '/>
                                        </div>
                                        <!-- Product name-->
                                        <div class="broodnaam">
                                            <input type="hidden" name="broodnaam" value='. $row['broodnaam'] . '/>
                                            <h5 class="fw-bolder">'.$row['broodnaam']. '</h5>
                                        </div>
                                        <!-- Product price-->
                                        <div class="prijs">
                                            <input type="hidden" name="broodnaam" value='. $row['prijs'] . '/>
                                            <h3> Prijs:  </h3>   <h3 class="fw-price"> €'.$row['prijs']. '</h3><br>
                                        </div>
                                        <!--voorraad-->
                                        ';
                                        if($row['voorraad'] == 0){
                                            echo '<h3 class="fw-voorraad" style="color: red;"> uitverkocht</h3><br>';
                                            echo '<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                                </div>';
                                        }else{
                                            //link die misschien kan helpen https://www.withinweb.com/info/a-shopping-cart-using-php-sessions-code/
                                            $broodjes = $row['broodjes_ID'];
                                            echo ' Voorraad: '.$row['voorraad'].'<br>
                                            </div>
                                            </div>
                                            <!-- Product actions-->
                                            
                                            <form action="cart.php?broodjes_ID='. $broodjes.'" method="POST" name="broodjes"  value=""
                                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                                    <div class="text-center"><button class="btn btn-outline-dark mt-auto shop-item-button" type="submit" name="add_to_cart">Bestellen</button></div>
                                                </div>
                                            </form>';
                                    }
                                    
                            echo '</div>
                        </div>
                    </div>';                           
        echo '</div>';     
        }
        echo  '</section>';

This almost shows the styling like i want problem is when you have for example 5 items it does this weird thing where they put the last two divs undernead eachother like this:
[div][div][div]
[div]
[div]

that''s not what I want I want it to look like
[div][div][div]
[div][div]

how can I fix this
pic of the last two divs being all weird like this

1649239026323.png
 
Hello 220061,

unfortunately your code is incomplete.
Because of the classes px-4 px-lg-5 mt-5 i suggest you are using a library like bootstrap. This is an important information, because that changes many appearances.

It would be helpful to post all informations of .css and .js which are implementet on the page or linking the website to live debug.

Many Greets,

Christian
 
I found out where something goed wrong I have this part of my code
if($row['voorraad'] == 0){
//dit stuk breekt de hele styling
echo '<h3 class="fw-voorraad" style="color: red;"> uitverkocht</h3><br>';
echo '<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
</div>';
}else{
//link die misschien kan helpen https://www.withinweb.com/info/a-shopping-cart-using-php-sessions-code/
$broodjes = $row['broodjes_ID'];
echo ' Voorraad: '.$row['voorraad'].'<br>
</div>
</div>
<!-- Product actions-->

<form action="cart.php?broodjes_ID='. $broodjes.'" method="POST" name="broodjes" value=""
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><button class="btn btn-outline-dark mt-auto shop-item-button" type="submit" name="add_to_cart">Bestellen</button></div>
</div>
</form>';
}

if the $row['voorraad']=0; you get the first styling and when one of those cards that styling it breaks the grid. I'm not sure why it does it though
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom