CodePen Embed - CSS Container Queries

Live

 
<main>
  <div class="main-content">
    <div class="card">
      <div class="content">
        <img src="https://avatars.githubusercontent.com/u/8554143?v=4" alt="" />
        <div class="copy">
          <p><b>Coco</b></p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto vero porro corrupti dicta autem alias perferendis inventore similique, fugiat neque odit! Incidunt quasi quaerat dolores in voluptates atque aut odit!</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto vero porro corrupti dicta autem alias perferendis inventore similique, fugiat neque odit! Incidunt quasi quaerat dolores in voluptates atque aut odit!</p>
        </div>
      </div>
    </div>
  </div>
</main>

Live

​x
 
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #ffc048;
  color: #1e272e;
}
img {
  display: block;
  border: 0 none;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}
​
main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100vw;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
}
​
.main-content {
  width: 100%;
  margin: 1rem 0 0 0;
}
.card {
  background: #fff;
  padding: 1rem;
  border: 1px solid #1e272e;
  box-shadow: 5px 5px 0px #1e272e;
}
.card .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 1rem 0 0 0;
}
.card .copy p:first-child {
  font-size: 1.25rem;
}
​
@media (min-width: 600px) {
  main {
    flex-direction: row;
  }
  .main-content {
    width: calc(100% - 400px);
    margin: 0 0 0 0.5rem;
  }
}
​
/*
  CSS CONTAINER QUERY
*/
​
.card {
  /* CSS CONTAINER */
  container-type: inline-size;
  container-name: card;
  resize: both;
  overflow: scroll;
}
​
/* Syntax that works in Chrome */
@container card size(min-width: 600px) {
  .card .content {
    flex-direction: row;
  }
​
  .card img {
    align-self: flex-start;
    width: 50%;
    max-width: 400px;
  }
​
  .card .copy {
    margin: 0 0 0 1rem;
  }
​
  .card .copy p {
    font-size: 1.125rem;
  }
  .card .copy p:first-child {
    font-size: 1.75rem;
    margin: 0;
  }
}
​
/* Syntax that works in Safari Technology Preview */
@container card (min-width: 600px) {
  .card .content {
    flex-direction: row;
  }
​
  .card img {
    align-self: flex-start;
    width: 50%;
    max-width: 400px;
  }
​
  .card .copy {
    margin: 0 0 0 1rem;
  }
​
  .card .copy p {
    font-size: 1.125rem;
  }
  .card .copy p:first-child {
    font-size: 1.75rem;
    margin: 0;
  }
}
​

Live

xxxxxxxxxx
 
/*
Go to chrome://flags in Google Chrome
Search for Enable CSS Container Queries and enable it
Restart Chrome
*/
​

This Pen is owned by mafqla on CodePen. It is a fork of this Pen.

See more by @mafqla on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.