CODEWITHSUNDEEP
htmlcss
notGich
notGich

Reputation: 3

What is making my CSS break up when I zoom out or in?

I have been working on a small web app and the layout breaks up whenever I zoom in or out. I've tried numerous solutions posted on the web and on the forum including using em instead of px units in my css. That did not solve the issue, as the picture below shows. My Board breaks when I zoom in or out

I'd like for the board to look like this on both small and large screens: How The Board Should look like

I'm guessing the problem is with how I have positioned elements, but beyond having a slight idea of where the problem might be, I'm stumped. Can someone point out what might be causing the issue?

Here's the HTML and CSS I'm working with.

.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;
}
<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>

Upvotes: 0

Views: 965

Answers (2)

ray
ray

Reputation: 27245

You could accomplish this fairly elegantly with a combination of position: absolute, display: flex, and flex-direction.

Note that the tiles are in ascending order in the markup. The CSS uses flex-direction: column-reverse and flex-direction: row-reverse to reverse them for the bottom row (16-25) and right column (26-30).

I'm specifying the tile size and edge color via CSS variables, aka custom properties, so if you need a different size or color you can change it in a single place and the entire board will adapt accordingly.

This example omits some of your CSS in the interest of clarity--showing only what's necessary to achieve the layout.

* {
  box-sizing: border-box; /* padding grows inward, doesn't inflate the element */
}

.brow-container {
  --tile-size: 4rem; /* establish the tile size */
  --edge-color: #328adb; /* establish the border color */
  --edge-size: 3px; /* establish the border size */
  
  position: relative; /* establish the positioning context for absolute elements */
  width: calc(var(--tile-size) * 12); /* board size based on tile size */
  height: calc(var(--tile-size) * 7);
  margin: 0 auto; /* center horizontally */
}

.brow-container .brow {
  display: flex; /* place tiles in a non-wrapping row or column */
}

.brow > * { /* all tiles */
  height: var(--tile-size);
  width: var(--tile-size);
  flex: 0 0 var(--tile-size); /* don't grow or shrink */
  box-shadow: var(--edge-size) 0 0 0 var(--edge-color); /* border on the right */
  display: flex; /* flex makes it easy to center content on both axes. in this case you could get away with text-align: center */
  justify-content: center;
  padding: 0.5em; /* keep content off the borders */
}

.brow2 {
  position: absolute;
  top: 0;
  right: 0;
  flex-direction: column; /* vertical */
}

.brow2 > * {
  box-shadow: 0 var(--edge-size) 0 0 var(--edge-color); /*bottom border */
}

.brow3 {
  position: absolute;
  bottom: 0;
  right: 0;
  flex-direction: row-reverse; /* horizontal in reverse order */
}

.brow3 > * {
  box-shadow: calc(var(--edge-size) * -1) 0 0 0 var(--edge-color); /* left border */
}

.brow4 {
  position: absolute;
  flex-direction: column-reverse; /* vertical in reverse order */
  left: 0;
  margin-top: 12px;
}

.brow4 > * {
  box-shadow: 0 calc(var(--edge-size) * -1) 0 0 var(--edge-color); /* top border */
}
<div class="brow-container">
  <div class="brow 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="brow 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="brow brow3">
    <div id="tile_16">16</div>
    <div id="tile_17">17</div>
    <div id="tile_18">18</div>
    <div id="tile_19">19</div>
    <div id="tile_20">20</div>
    <div id="tile_21">21</div>
    <div id="tile_22">22</div>
    <div id="tile_23">23</div>
    <div id="tile_24">24</div>
    <div id="tile_25">25</div>
  </div>
  <div class="brow brow4">
    <div id="tile_26">26</div>
    <div id="tile_27">27</div>
    <div id="tile_28">28</div>
    <div id="tile_29">29</div>
    <div id="tile_30">30</div>
  </div>
</div>

Upvotes: 0

FluffyKitten
FluffyKitten

Reputation: 14312

If you want elements to appear in a specific position, then you are best to use position:absolute - you can places things exactly where you want them. This isn't used very often in responsive websites, but your requirements are for a fixed-width display so in this case it is perfect for you.

  1. You can create a container that has position:relative - that means that the elements we place inside it are relative to it - i.e. they are contained within it and all positions are relative to inside that container.

  2. Then for your element, you use position:absolute and place them exactly where you want with top, left etc.

  3. Now you can place the new container (I gave it the class brow-container in the example below) wherever you want it to be, and all of the elements will move as a single unit instead of having to measure the position of each one separately.

Working example: FYI I have removed the min-width from .container-fluid so you can see it in the snippet window:

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

.brow-container {
  margin: 0px auto;
  width: 500px;
  height: 290px;
  position: relative;
}

.brow1 {
  position: absolute;
  top: 0;
  left: 0;
}

.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: absolute;
  top: 0;
  right: 0;
}

.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: absolute;
  bottom: 0;
  right:0;
}

.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: absolute;
  top:40px;
  left: 0;
}

.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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

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

    <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>
</div>

Upvotes: 3

Related Questions