div position with different page width

Question

I'm searching for a simple way to create a layout that is visually like this

and that become like this with small page size

Do I have to create two ul with 6 li the first one and 2 li the second one and play with css rule for each ul positioning?

Answer 1

To solve your layout see attached code snippet. I excluded your color layout to decrease build time. Added 2 different background color to easy see the device width breakpoint.

The solution is being achieved by combining "CSS media queries" and "CSS Grid". Both are built-in within standard CSS.

• The "CSS media queries" provides mechanism to change css content based on media device width. In this case the breakpoint is set between 500px/501px.

• The "CSS Grid" is a grid layout that allows you to position divs based on your wanted layout.

/**********/
/* Mobile */
/**********/

@media
only screen
and (max-width: 500px) {

  body {
    background-color: pink;
    margin-top: 20px;
      }

      .wrapper {
        display: grid;
        grid-row-gap: 20px;
        grid-template-columns:
        1fr
        ;
        grid-template-rows:
        repeat(8, 80px)
        ;
        grid-template-areas:
        "_1"
        "_2"
        "_3"
        "_4"
        "_5"
        "_6"
        "_7"
        "_8"
        ;
      }

    ._1 {grid-area: _1;}
    ._2 {grid-area: _2;}
    ._3 {grid-area: _3;}
    ._4 {grid-area: _4;}
    ._5 {grid-area: _5;}
    ._6 {grid-area: _6;}
    ._7 {grid-area: _7;}
    ._8 {grid-area: _8;}

    ._1,
    ._2,
    ._3,
    ._4,
    ._5,
    ._6,
    ._7,
    ._8 {
      background-color: white;
      padding: 20px 0px 0px 20px;
      font-size: 150%;
      margin: 0px 20px 0px 20px;
    }
}

/***********/
/* Desktop */
/***********/

@media
only screen
and (min-width: 501px) {

  body {
    background-color: lightblue;
  }

  .wrapper {
    display: grid;
    grid-column-gap: 70px;
    grid-row-gap: 25px;
    grid-template-columns:
    1fr
    1fr
    1fr
    ;
    grid-template-rows:
    100px
    100px
    100px
    ;
    grid-template-areas:
    "_1 _2 _7"
    "_3 _4 ."
    "_5 _6 _8"
    ;
  }

._1 {grid-area: _1;}
._2 {grid-area: _2;}
._3 {grid-area: _3;}
._4 {grid-area: _4;}
._5 {grid-area: _5;}
._6 {grid-area: _6;}
._7 {grid-area: _7;}
._8 {grid-area: _8;}

._1,
._2,
._3,
._4,
._5,
._6,
._7,
._8 {
  background-color: white;
  padding: 20px 0px 0px 20px;
  font-size: 150%;
}

}

<div class="wrapper">
    <div class="_1">1</div>
    <div class="_2">2</div>
    <div class="_3">3</div>
    <div class="_4">4</div>
    <div class="_5">5</div>
    <div class="_6">6</div>
    <div class="_7">7</div>
    <div class="_8">8</div>
</div>

Answer 2

You would use the css media Queries. you would state:

@media only screen and (max-width:600px) {
    [class*="col-"] {
        width: 100%;
   }

and replace the max-width with the desired max screen width for this to take effect. this is also assuming that each table element has its own class name and ends in 1 then 2 and so on. you can change it to div or just do each element by hand like:

.classname {
    width: 100%
  }

make note that the width of the element set to 100% will be the width of the containing element. for padding add this table in a div and set padding around it.

do some research in media queries in css for a better understanding of how it works.