Ambrose Liew

Resize! 3 Layouts with the power of 1 Query!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim corporis asperiores suscipit soluta molestias quo architecto ut accusantium incidunt quibusdam cumque veritatis provident, consectetur nostrum, non excepturi cum ratione! Nam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga alias aspernatur ea velit. Harum id recusandae deleniti rem provident dolorum quisquam unde fuga, ducimus iste quia, in molestias ut voluptatum assumenda perferendis commodi eum accusantium, eius sit exercitationem.

ContainerQueries.tsx

ContainerQueries.module.css


import React from "react";
import styles from "./ContainerQueries.module.css";
export default function ContainerQueries() {
  return (
    <div>
      <p style={{ fontSize: "2rem" }}>
        Resize! 3 Layouts with the power of 1 Query!
      </p>
      <div className={styles.container}>
        <div className={styles.wrapper}>
          <img
            alt="Example"
            src={"//unsplash.it/400/300"}
            width="400"
            height="300"
            className={styles.image}
          />
          <p className={styles.text}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
            corporis asperiores suscipit soluta molestias quo architecto ut
            accusantium incidunt quibusdam cumque veritatis provident,
            consectetur nostrum, non excepturi cum ratione! Nam. Lorem ipsum
            dolor sit amet consectetur adipisicing elit. Fuga alias aspernatur
            ea velit. Harum id recusandae deleniti rem provident dolorum
            quisquam unde fuga, ducimus iste quia, in molestias ut voluptatum
            assumenda perferendis commodi eum accusantium, eius sit
            exercitationem.
          </p>
        </div>
      </div>
    </div>
  );
}