Container query for likes

openstad · Jan 24, 2025 · 19536b3 · 19536b3
1 parent 38a0992
commit 19536b3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/likes/src/likes.css b/packages/likes/src/likes.css
@@ -19,6 +19,23 @@
 .like-widget-container.medium .like-option-container {
   grid-template-columns: 1fr 1fr;
 }
+
+.like-widget-container.medium .like-option-container .utrecht-button:first-of-type:last-of-type{
+  grid-column: span 2;
+}
+
+.like-widget-container.medium{
+  container-type: inline-size;
+}
+
+@container (max-width: 400px) {
+  .like-widget-container.medium .like-option-container{
+    grid-template-columns: 1fr;
+  }
+}
+
+
+
 .like-option {
   max-width: unset;
 }

diff --git a/packages/likes/src/main.tsx b/packages/likes/src/main.tsx
@@ -35,6 +35,6 @@ const config: LikeWidgetProps = {
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <Likes {...config} title="dsfsf" variant="large" />
+    <Likes {...config} title="Dit is een titel" variant="large" />
   </React.StrictMode>
 );