Can someone help me understand why my layout is breaking when I zoom in or out? I’ve tried numerous solutions posted around the web, but none of them work for me, including using em units instead of px in my css, and even adding bootstrap which broke the layout even more. I’m working on a small board game, and I think the problem might be with my positioning.

Here’s an image of how the board looks like when I zoom out

r/webdev - Help me find out what's wrong with my CSS!

Layout break

This is the HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
    <div class="container-fluid">

        <div class="brow1">
            <div id="tile_1" class="">1</div>
            <div id="tile_2" class="">2</div>
            <div id="tile_3" class="">3</div>
            <div id="tile_4" class="">4</div>
            <div id="tile_5" class="">5</div>
            <div id="tile_6" class="">6</div>
            <div id="tile_7" class="">7</div>
            <div id="tile_8" class="">8</div>
            <div id="tile_9" class="">9</div>
            <div id="tile_10" class="">10</div>
        </div>
        <div class="brow2">
            <div id="tile_11" class="">11</div>
            <div id="tile_12" class="">12</div>
            <div id="tile_13" class="">13</div>
            <div id="tile_14" class="">14</div>
            <div id="tile_15" class="">15</div>
        </div>
        <div class="brow3">
            <div id="tile_25" >25</div>
            <div id="tile_24" >24</div>
            <div id="tile_23" >23</div>
            <div id="tile_22" >22</div>
            <div id="tile_21" >21</div>
            <div id="tile_20" >20</div>
            <div id="tile_19" >19</div>
            <div id="tile_18" >18</div>
            <div id="tile_17" >17</div>
            <div id="tile_16" >16</div>
        </div>
        <div class="brow4">
            <div id="tile_30" >30</div>
            <div id="tile_29" >29</div>
            <div id="tile_28" >28</div>
            <div id="tile_27" >27</div>
            <div id="tile_26" >26</div>
        </div>
    </div>
</body>
<link rel="stylesheet" media="screen and (max-width: 1920px)" href="style.css">
</html>

Here’s the CSS

.container-fluid{
    min-width: 1366px;
    max-width: 2048px;
    margin: 0px auto; 
    width: 100%;
}

.brow1 {
    position: fixed;
    top: 3.125em;
    left: 29.375em;
    float: right;
}

.brow1>div {
    border-right:3px solid #328adb;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.739);
    position:relative;
}

.brow2 {
    position: fixed;
    top: 3.125em;
    right: 3.438em;
}

.brow2>div {
    border-bottom:0.188em solid #328adb;
    margin-bottom: 0.250em;
    display: block;
    width: 4rem;
    height: 4rem;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.739);
    position:relative;
}

.brow3 {
    position: fixed;
    bottom: 8.125em;
    right: 3.438em;
}

.brow3>div {
    border-left:3px solid #328adb;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.739);
    position:relative;
}

.brow4 {
    position: fixed;
    top: 7.813em;
    left: 29.375em;
}

.brow4>div {
    border-top:0.188em solid #328adb;
    margin-bottom: 0.313em;
    display: block;
    width: 4rem;
    height: 4rem;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.739);
    position:relative;
}

Thank you!



Source link

Write A Comment