CODEWITHSUNDEEP
javascripthtmlcsspositionscale
Not Szwagi
Not Szwagi

Reputation: 81

CSS position and scale object by resolution

I'm trying to achieve this in css

How would I go about it? I couldn't make it fill the empty space on the sides, can I do it in css only (and so it works with browser zooming as well)

This is my code (simplified), since nothing was working for me I provide a raw code

<html>
<head>
    <style>        
        #parent {
            width: 1000px;
            height: 1000px;
            background-color: #0ff;
        }
        
        .child {
            width: 400px;
            height: 200px;
            margin: 20px;
            background-color: #f00;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

Upvotes: 2

Views: 79

Answers (3)

Jeremy Thille
Jeremy Thille

Reputation: 26360

Flexbox is really good at this kind of things :

Demo on Codepen (or run it below)

div.out {
  border: #f00 solid 1px;
  width: 500px;
  height: 300px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
div.out div.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  border: #00f dashed 1px;
  width: 100%;
}
div.out div.flex div.in {
  min-width: 300px;
  border: #008000 solid 5px;
  height: 100px;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
div.out div.flex div.in h2 {
  font-size: 2rem;
}


/* Below : just for the animation */

div.out {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-name: changewidth;
          animation-name: changewidth;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}
@-webkit-keyframes changewidth {
  from {
    width: 300px;
  }
  to {
    width: 800px;
  }
}
@keyframes changewidth {
  from {
    width: 300px;
  }
  to {
    width: 800px;
  }
}
<div class="out">
  <div class="flex">
    <div class="in">
      <h2>Content1</h2>
    </div>
    <div class="in">
      <h2>Content2</h2>
    </div>
  </div>
</div>

Upvotes: 0

Asons
Asons

Reputation: 87191

Use flexbox

Fiddle demo

#parent {
  display: flex;
  flex-wrap: wrap;
  background-color: #0ff;
}
.child {
  flex: 1 0 auto;
  width: 400px;
  height: 200px;
  margin: 20px;
  background-color: #f00;
}
<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

Upvotes: 2

Dhaval Chheda
Dhaval Chheda

Reputation: 5147

style the parent container ( if you don't have one then create it ) as follows 

.parent {
display:flex;
flex-wrap:wrap;
}

.child {
flex: 1;
width: 45%;  /* whatever you want on the bigger screen */

@media ( min-width : 500px ) {

    .child {
       width:100% ;
    }
}

Upvotes: 0

Related Questions