# data[].attributes.body
https://whimsical.com/device-sizes-and-breakpoints-AE8Cze2sDvD2eE56Q7eUo3

# data[].attributes.body
New feature 🌟

Onboarding panel

# data[].attributes.body
👉 Responsive design: breakpoints

☝️ Using breakpoints outside of CSS

❓ Why CSS container queries

🤧 Problems integrating container queries

👨‍🔧 How we solve them

# data[].attributes.body
p-4 tablet-portrait:p-0

->

.p-4 {
  padding: 1rem;
}

@media (min-width: 744px) {
  .tablet-portrait\:p-0 {
    padding: 0px;
  }
}

# data[].attributes.headline
Content picker is used on both Surface and Dashboard

# data[].attributes.subject
Content picker is used on both Surface and Dashboard

# data[].attributes.body
@tablet-portrait/surface-container:p-2

doesn't work on Dashboard

# data[].attributes.body
Make an element on dashboard a container

Update TW classes to be less specific: @tablet-portrait:h-2

Or, duplicate the class: @tablet-portrait/surface-container:h-2 @tablet-portrait/dashboard-container:h-2

# data[].attributes.body
Not flexible enough. It's a good practice to target a named container.

We can't keep duplicating the class for every container that the component can be used in.

# data[].attributes.body
Use container queries and media queries on the same element

@tablet-portrait/surface-container:h-2 tablet-portrait:h-2

# data[].attributes.body
Won't work because container queries don't take precedence over media queries.

# data[].attributes.body
We need a way to select only the elements that don't belong in any containers.

# data[].attributes.body
window_size store

# data[].attributes.body
Allow styling elements based on the size of their parent container, rather than the viewport.

# data[].attributes.body
https://css-container-queries-demo.duckwho.codes/surface-container-queries/

# data[].attributes.body
@container/surface-container

->

.\@container\/surface-container {
  container-type: inline-size;
  container-name: surface-container;
}

# data[].attributes.headline
Replace media queries with container queries

# data[].attributes.subject
Replace media queries with container queries

# data[].attributes.body
tablet-landscape:p-4

->

@tablet-landscape/surface-container:p-4

# data[].attributes.body
Use surface_container_size store instead of window_size store

# data[].attributes.body
This talk is solely based on the patterns we use in our web app.

# data[].attributes.body
MDN documentation

css-container-queries-demo

# data[].attributes.body
@tablet-landscape/surface-container:h-8

->

@container surface-container (min-width: 1024px) {
  .\@tablet-landscape\/surface-container\:h-8 {
    height: 2rem;
  }
}

# data[].attributes.body
Meet -@ TW variant

https://github.com/padlet/mozart/pull/19262

# data[].attributes.body
Currently, this is what we do:

isUsedOnSurface ?
  isContainerSmallerThanTabletPortrait :
  isSmallerThanTabletPortrait

# data[].attributes.headline
How can we make it fall back to the viewport size?

# data[].attributes.subject
How can we make it fall back to the viewport size?

# data[].attributes.body
Something like this:

useContainerSizeStore().isContainerSmallerThanTabletPortrait

# data[].attributes.body
Use container queries!

# data[].attributes.body
Exceptions are:

Slideshow

PDF export page

# data[].attributes.body
Just something to keep in mind for now.

# data[].attributes.body
Don't use media/container queries. Use size presets.