Click here to Skip to main content
15,510,381 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hey guys, heres my project and i've been having a hard time trying to figure out the reason why this div "leftCardapio", whenever its zoomed in, the elements inside of it increase their height and width.
i have no ideia what this may be, can someone please gimme a hand?
appreciate the help



HTML
<pre><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="./imgs/HMSC_Catavento.png">
    <link rel="stylesheet" href="css/style.css">
    <title>Restaurante Recanto </title>
</head>

<body>
    <div class="container">
        <div class="content">
            <img src="./imgs/Prato_Content_5.png-" id="img_Content">
        </div>
        <div class="bottom"></div>
        <div class="left">
            <div class="itemDestaque">
                <img src="./imgs/Destaque.png" id="destaqueIMG">
                <br><span> DESTAQUE</span>
            </div>
            <div class="itemCardapio" id="itemCardapio">
                <img src="./imgs/Cardapio2.png" id="cardapioIMG">
                <br><span> CARDÁPIO </span>
                <div class="leftCardapio">
                    <div class="itemPratos"></div>
                    <div class="itemSaladas"></div>
                    <div class="itemSopas"></div>
                    <div class="itemSobremesas"></div>
                    <div class="itemMolhos"></div>
                    <div class="itemPorcoes"></div>
                </div>
            </div>
            <div class="itemBebidas">
                <img src="./imgs/Bebidas.png" id="bebidasIMG">
                <br><span> BEBIDAS </span>
                <div class="leftBebidas">
                    <div class="itemBebida1"></div>
                    <div class="itemBebida1"></div>
                    <div class="itemBebida1"></div>
                    <div class="itemBebida1"></div>
                    <div class="itemBebida1"></div>
                    <div class="itemBebida1"></div>
                </div>
            </div>
            <div class="itemReservar_mesa">
                <img src="./imgs/Mesa.png" id="reservar_mesaIMG">
                <br><span> RESERVAR MESA </span>
            </div>
        </div>
        <div class="top">
            <div class="topBox1">
                <div class="imgTopBox1">
                    <img src="./imgs/LogoRecanto.png" id="logoRecanto">
                </div>
            </div>
            <div class="topBox2">
                <img src="./imgs/Mesa.png" id="mesaIMG">
            </div>
            <div class="topBox3">
                <img src="./imgs/Pesquisar.png" id="pesquisarIMG">
            </div>
            <div class="topBox4">
                <img src="./imgs/Conta.png" id="contaIMG">
            </div>
            <div class="topBox5">
                <img src="./imgs/Pedidos.png" id="pedidosIMG">
            </div>
        </div>
    </div>
    <!-- <script src="./scripts/changeImg.js"></script> -->
</body>

</html>



CSS
<pre>/* Variables */

:root {
    --Gray: #323a3a;
    --DarkBlue: #123B79;
    --LightBlue: #18A5A7;
    --LightGray: #D9D9D9;
    --White: white;
}

html,
body {
    margin: 0 auto;
    user-select: none;
    background-color: black;
    font-family: 'Arial';
    /* overflow: hidden; */
}


/* Order:
Bottom,
Left,
Top,
Content,
Container
 */


/* Container DIV*/

.container {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100vw;
    height: 100vh;
}

.content {
    text-align: center;
    background-color: gray;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
}

#img_Content {
    height: 97%;
    width: 100%;
    object-fit: cover;
}


/* Bottom DIV */

.bottom {
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: black;
    bottom: 0;
    margin-left: 0%;
    width: 100%;
    height: 10%;
}


/* LEFT DIV */

.left {
    display: flex;
    flex-direction: column;
    column-gap: 10px;
    background-color: var(--Gray);
    position: absolute;
    left: 0;
    width: 10%;
    height: 100%;
}

.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa {
    display: flex;
    flex-direction: column;
    padding-top: 10%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    flex: 1;
}

.itemDestaque {
    margin-top: 33%;
}

.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa span {
    font-weight: 550;
    overflow: hidden;
    color: white;
}

.itemCardapio:hover,
.itemDestaque:hover,
.itemBebidas:hover,
.itemReservar_mesa:hover {
    box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.5);
    background-color: var(--LightBlue);
}

#destaqueIMG,
#cardapioIMG,
#bebidasIMG,
#reservar_mesaIMG {
    height: 80%;
    width: 40%;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    overflow: hidden;
}

#bebidasIMG {
    width: 30%;
}


/* LEFT CARDAPIO DIV   */

.leftCardapio {
    display: none;
}

.itemCardapio:hover>.leftCardapio {
    display: flex;
    flex-direction: column;
    background-color: white;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 100%;
    width: 250px;
    height: 100%;
}

.itemPratos,
.itemSaladas,
.itemSopas,
.itemSobremesas,
.itemMolhos,
.itemPorcoes {
    height: 80px;
    width: 100%;
    background-color: lightgray;
    border-bottom: 3px solid white;
}

.itemPratos:hover,
.itemSaladas:hover,
.itemSopas:hover,
.itemSobremesas:hover,
.itemMolhos:hover,
.itemPorcoes:hover {
    background-color: var(--DarkBlue);
}


/* LEFT BEBIDAS DIV  */

.leftBebidas {
    display: none;
}

.itemBebidas:hover>.leftBebidas {
    display: flex;
    flex-direction: column;
    background-color: white;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 100%;
    width: 250px;
    height: 100%;
}

.itemBebida1 {
    height: 80px;
    width: 100%;
    background-color: lightgray;
    border-bottom: 3px solid white;
}

.itemBebida1:hover {
    background-color: var(--DarkBlue);
}


/* TOP DIV */


/* Top Box 1 = Logo Recanto
Top Box 2 = Mesa
Top Box 3 = Pesquisa
Top Box 4 = Conta
Top Box 5 = Pedidos  */

.top {
    display: flex;
    flex-direction: row;
    background-color: #123B79;
    position: absolute;
    top: 0;
    width: 100%;
    height: 7%;
}

.topBox1 {
    display: flex;
    flex-direction: row;
    flex: 8;
}

.topBox2,
.topBox3,
.topBox4,
.topBox5 {
    text-align: center;
    cursor: pointer;
    flex: 1;
}

.topBox2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #ffffff;
}

.topBox3,
.topBox4,
.topBox5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-right: 1px solid #2fa9ab;
    background-color: var(--LightBlue);
}

.topBox2:hover {
    transform: scale(1.0);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    background-color: #dadada;
}

.topBox3:hover,
.topBox4:hover,
.topBox5:hover {
    transform: scale(1.0);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    background-color: #4eb9bb;
    border-right: none;
}

.imgTopBox1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 19%;
    height: 100%;
}

#logoRecanto {
    max-width: 100%;
    max-height: 90%;
}

#mesaIMG,
#pesquisarIMG,
#contaIMG,
#pedidosIMG {
    width: 20%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    overflow: hidden;
}

#mesaIMG {
    filter: invert(0%) sepia(9%) saturate(0%) hue-rotate(130deg) brightness(0%) contrast(0%);
}


What I have tried:

tried positioning everything using position absolute
tried margin top and padding
no ideia what can be causing this
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900