CODEWITHSUNDEEP
htmlcssflexbox
maher
maher

Reputation: 43

How to make my content responsive to screen size both horizontally and vertically?

I try to make a page with container and content "responsive" that reduces with the window, especially the height.

Currently my code allows to reduce width but not height. It's possible to do that ?

My current code : https://jsfiddle.net/u1Ld5r7v/1/

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: auto;
}

body {
  height: 100%;
  overflow: hidden;
}

main {
  display: flex;
}

img {
  width: 22.5vw;
  height: 35vw;
  margin: 0;
  object-fit: cover;
}

.wrapper {
  display: flex;
}

.list {
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  padding: 0;
}

.list a {
  margin: 0%;
  padding: 0 4%;
}
<body>
  <main class="wrapper">
    <div class="list">
      <a href="#"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/01/af2.png"></a>
      <a href="#"><img src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Flat%20Blue-900x900.jpg"></a>
      <a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Orange.jpg"></a>
      <a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Pink.jpg"></a>
      <a href="#"><img src="https://i.pinimg.com/originals/bf/48/a7/bf48a70ec34fbcb3d71f3c685e98f95b.jpg"></a>
      <a href="#"><img src="https://emmanuel.info/wp-content/uploads/2018/12/rawpixel-577494-unsplash.jpg"></a>
    </div>
  </main>

</body>

Thanks for your help.

Upvotes: 0

Views: 478

Answers (2)

maher
maher

Reputation: 43

Problem solved, here we use different properties to manage height and width.

Demo here.

HTML

  <body>
    <main class="wrapper">
      <div class="list">
        <a href="#"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/01/af2.png"></a>
        <a href="#"><img src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Flat%20Blue-900x900.jpg"></a>
        <a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Orange.jpg"></a>
        <a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Pink.jpg"></a>
        <a href="#"><img src="https://i.pinimg.com/originals/bf/48/a7/bf48a70ec34fbcb3d71f3c685e98f95b.jpg"></a>
        <a href="#"><img src="https://emmanuel.info/wp-content/uploads/2018/12/rawpixel-577494-unsplash.jpg"></a>
      </div>
    </main>
  </body>

CSS

html,body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width:auto;
}

body {
  height: 100%;
  overflow: hidden;
}

main {
  display: flex;
}

img {
  width: 45vmin;     /*here we use vmin rather than vh or vw*/
  height: 70vmin;    /*here we use vmin rather than vh or vw*/
  margin: 0;
  object-fit: cover;
}
.wrapper {
  display: flex;
}

.list {
  width: 100vw;
  height: 100vh;    /*here we add height proprietie !important!*/ 
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0;
  align-items: center;
}

.list a {
  margin: 0%;
  padding: 0 4%;
}

Thanks for your help :-)

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371231

The images scale only on horizontal re-size because they are sized with viewport width units (vw).

img {
  width: 22.5vw;
  height: 35vw;
}

If you wanted them to re-size on vertical re-size, then you would use viewport height units (vh).

If you want them to scale on both vertical and horizontal re-size, then try vmin or vmax units.

revised demo

https://drafts.csswg.org/css-values/#viewport-relative-lengths

Upvotes: 1

Related Questions