Aligning Images and Text in a Responsive Book Catalog using CSS Flexbox!

Here is error code, see details!

<?php
    include("../../controllers/config.php");
    include ("../../controllers/protect.php");
    if(!isset($_SESSION)){
        session_start();
    }
   
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catálogo</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }/*Base sets*/
        :root{
            --lightThemeColor1: #ecd8ff;
            --lightThemeColor2: #4d1147;
            --lightThemeColor3: #2f0a2b;
            --fontClara: white;
            --shadow:rgb(36, 36, 36);
        }/*Área das variáveis*/
        section.catalogo-principal-box{
            width: 100%;
            padding: 30px;
            & h1{
                font-size: 32px;
                margin: 0px 0px 30px 0px;
            }
            & div.books{
                width: 100%;
                display: flex;
                background-color: var(--lightThemeColor2);
                flex-wrap:wrap;
                padding: 12.5px;
                border: 5px solid var(--lightThemeColor3);
                box-shadow: 2px 3px 4px 0px rgb(80,80,80);
            }
            & div#livro0{
                background-color:red;
                margin:0;
            }   
            & div.book{
                width: 80px;
                height:100px;
                background-color:var(--lightThemeColor3);
                display: flex;
                margin: 0px 5rem;
                a{
                    width: 100%;
                    height:90%;
                }
            }
        }
     
    </style>
</head>
<body>
    <section class="catalogo-principal-box">
        <h1>Catálogo</h1>
        <?php
            $sqlcode = "SELECT * FROM livro";
            $sqlquery = $conn->query($sqlcode);
            $qtd = $sqlquery->num_rows;
            
            if($qtd >= 1){
                ?>
                <div class="books">
                <?php
                    for($i = 0; $i < $qtd; $i++){
                        $livro = $sqlquery->fetch_assoc();
                        $livroCod = $livro['Livro_Cod'];
                        ?>
                        <div class="book" id="<?php echo "livro{$i}";?>">
                            <?php
                                if(isset($_SESSION['Aluno_RM']) and $_SESSION['user_type'] == 'aluno'){
                                    echo "<a href='../php/home.php?actionsAluno=book&livroCod={$livroCod}'><img style='width:50px;' src='../../{$livro['Livro_Capa']}'></a>";
                                    echo "<p>ola</p>";
                                }else if(isset($_SESSION['Func_Cod']) and $_SESSION['user_type'] == 'funcionario'){
                                    echo "<a href='../php/home.php?actionsFunc=book&livroCod={$livroCod}'><img style='width:50px;' src='../../{$livro['Livro_Capa']}'></a>";
                                    echo "<p>ola</p>";
                                }
                               
                            ?>
                        <div>
                        <?php
                    }
                    ?>
                </div>
                <?php
            }  
        ?>        
    </section>
</body>
</html>

To align the image and the <p> tag like columns while keeping your design intact, you can adjust the CSS for the .book class. Since you’ve already tried flex-direction: column, let’s make sure it’s applied correctly along with some other styling tweaks to ensure it looks good.

Here’s how you can modify the CSS and the HTML structure:

CSS Adjustments

Set display: flex; on the .book class.
Use flex-direction: column; to stack items vertically.
Center the items if needed by using align-items: center;.
Adjust margins or padding as necessary to prevent overflow and ensure a good layout.

Here’s the updated CSS:

#css
& div.book {
    width: 80px;
    height: 100px; /* Adjust this if needed */
    background-color: var(--lightThemeColor3);
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    margin: 0px 5rem;
}

Updated HTML Structure

The HTML structure you have seems fine, but just to clarify, here’s how it would look in context:

#php
<div class="book" id="<?php echo "livro{$i}";?>">
    <?php
        if (isset($_SESSION['Aluno_RM']) && $_SESSION['user_type'] == 'aluno') {
            echo "<a href='../php/home.php?actionsAluno=book&livroCod={$livroCod}'><img style='width:50px;' src='../../{$livro['Livro_Capa']}'></a>";
            echo "<p>ola</p>";
        } else if (isset($_SESSION['Func_Cod']) && $_SESSION['user_type'] == 'funcionario') {
            echo "<a href='../php/home.php?actionsFunc=book&livroCod={$livroCod}'><img style='width:50px;' src='../../{$livro['Livro_Capa']}'></a>";
            echo "<p>ola</p>";
        }
    ?>
</div>

Full CSS Example

Here’s how the relevant section of your CSS would look after the adjustments:

#css
& div.book {
    width: 80px;
    height: auto; /* Change to auto if you want to adjust height dynamically */
    background-color: var(--lightThemeColor3);
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align items */
    margin: 0px 5rem;
    padding: 5px; /* Add some padding for spacing */
}

& div.book img {
    width: 50px; /* Adjust width as necessary */
    margin-bottom: 5px; /* Space between image and text */
}

Note:

Ensure that your .book container’s height is dynamic by changing height: 100px; to height: auto; if necessary.
Use align-items: center; to horizontally center the image and text within each book element.
Adding some padding or margin to the image and text can help visually separate them for better readability.

With these changes, the image and the <p> tag should align as columns without ruining your overall design. If you’re still having issues, double-check for any other CSS rules that might be affecting the layout or causing conflicts.

Coding Filters Enhance Collaboration in Development Teams!

In team-based development environments, coding filters help enhance collaboration by making code more modular and easier to understand. By using filters, developers can work on different parts of an application without interfering with one another, streamlining the development process and improving team productivity.

Author

Ayesha Malik

View all posts