container queries

PHOTO

Thu Jan 16 2025 01:13:23 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #container #media-queries

 &__content{
    width: 100%;
    display: flex;
   
    margin-right: auto;
    margin-left: auto;
  
    @media (min-width: 576px) {
      max-width: 540px;
    }
  
    @media (min-width: 768px) {
      max-width: 720px;
    }
  
    @media (min-width: 992px) {
      max-width: 960px;
    }
  
    @media (min-width: 1200px) {
      max-width: 1140px;
    }
  
    @media (min-width: 1400px) {
      max-width: 1320px;
    }
  }

COPY

Save snippets that work from anywhere online with our extensions

Comments

CSS

@davidmchale

Expanding Div with height Breakout Container Google Font preload Random Image URL Custom Properties width min() counter incrementer custom radio buttons drop button with active SVG <use> with html Preconnect fonts css maps scss map with loop and conditional Viewing a map object only element if we style multiple Grid with Subgrid and responsive first column on mobile stretch child container queries setProperty with CSS variables

#css #display #container

FLEX: A simple visual cheatsheet for flexbox

https://flexbox.malven.co/

#container #media-queries

container queries

 &__content{
    width: 100%;
    display: flex;
   
    margin-right: auto;
    margin-left: auto;
  
    @media (min-width: 576px) {
      max-width: 540px;
    }
  
    @media (min-width: 768px) {
      max-width: 720px;
    }
  
    @media (min-width: 992px) {
      max-width: 960px;
    }
  
    @media (min-width: 1200px) {
      max-width: 1140px;
    }
  
    @media (min-width: 1400px) {
      max-width: 1320px;
    }
  }

#css #media-queries

CSS Media Queries

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

container queries

Save snippets that work from anywhere online with our extensions

Comments

More like this

CSS

Browse more snippets >>

container queries

Save snippets that work from anywhere online with our extensions

Comments

More like this

CSS

Browse more snippets >>

Embed code snippet