CODEWITHSUNDEEP
javascriptcss
misah
misah

Reputation: 37

I want to replicate the responsive behaviour of the elements from this site, how to proceed?

I am referencing following website: http://heathershaw.com/index.html

When resizing the window, the elements (where her work is being displayed in thumbnail form) the elements are shrinking and growing dynamically and are keeping their height/width ratio. Also, when going below certain window size, the number of elements changes from 9 to 10 or vice versa, to keep the symmetry. I tried to replicate this behaviour using flexbox and simple media queries, but it has not quite yet the outcome i was wishing it would have.

Codepen to my current try: https://codepen.io/misah/pen/MWWROeP

    <body>

<div class="container section_header">
    <h1 class="header_name">Lorem</h1>
    <h4 class="header_subname">Ipsum</h4>
</div>

    <div class="container section_main">
    <div class="item_wrapper">
        <div class="item item_1">

        </div>
        <div class="item item_2">

        </div>
        <div class="item item_3">

        </div>
        <div class="item item_4">

        </div>
        <div class="item item_5">

        </div>
        <div class="item item_6">

        </div>
        <div class="item item_7">

        </div>
        <div class="item item_8">

        </div>
        <div class="item item_9">

        </div>
        <div class="item item_10">

        </div>
    </div>
    </div>
    <div class="section_outro">
        <div class=" container">

        </div>
    </div>
    <div class="section_footer">

    </div>



    </body>
    <script src="./script/script.js"></script>

    </html>

* {
      margin: 0 auto;
      padding: 0;
      box-sizing: border-box;
   }




   html,
   body:before {
   width: 100%;
   height: 100%;
   background-image: linear-gradient(rgba(29, 45, 56, 0.89),
   rgba(29, 45, 56, 0.89)),
   url(../assets/foto.jpg);
   background-position: center center;
   height: 100%;
   width: 100%;
   background-size:  cover;
   background-attachment: fixed;
   background-repeat: no-repeat;
   position: absolute;
  }



  .item {



  width: 100%;
  min-width: 350px;
  min-height: 350px;
  background-color: white;
  background-position: center;
  margin: 50px;
  background-size: cover;
  box-sizing: border-box;

  flex-basis: 25.3%;
   }

  .item_wrapper {
  margin-top: 130px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: space-evenly;
  align-items: stretch;
  width: 100%;

  height: auto;
  }

 .item_1 {
  background-image: url(../assets/bg.jpg);
  }

 .item_10 {
  background-image: url(../assets/foto.jpg);
  }

  @media only screen and (min-width: 1688px)  {
 .item_10 {
    display:none;
   }
  }

.container {
 width: 80%;
}

.section_header{
  text-align: center;
  padding-top: 40vh;
  position: relative;
 }

 .header_name {
  font-family: Bebasneue;
  font-size: 60px;
  color: antiquewhite;
 }

 .header_subname{
  font-family: Bebasneuelight;
  font-size: 37px;
  color: #5E94B8;
  }

Is there a javascript library for this kind of stuff or is this even possible with just css?

Upvotes: 1

Views: 62

Answers (1)

4givN
4givN

Reputation: 3234

Use bootstrap grid feature, you can find more example on bootsnipp.com like this https://bootsnipp.com/snippets/7N6bW

Upvotes: 1

Related Questions