Responsiveness

[Sowgenius]

I have issue with the responsiveness of my layout. I followed the docs but it still not working

import React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import {
  Callout,
  Center,
  Column,
  Container,
  Item,
  Menu,
  Row,
  Spacer,
  Wrapper
} from "react-inky";

import { Mylogo } from "../../public/logo.svg";


const style = {
  container: {
    fontFamily: "Work Sans"
  },

  p: {
    fontSize: "16px"
  },

  h3: {
    fontSize: "25px"
  },

  title_name: {
    fontSize: "30px",
    color: "#808080"
  },

  headtitle: {
    fontSize: "27px"
  },

  bande: {
    fontSize: "18px",
    backgroundColor: "#ecb443"
  },

  subtitle: {
    fontSize: "20px"
  },

  logo: {
    width: "200px",
    height: "200px",
    padding: "10px"
  }
};




export default function EmailTemplate({ name,id,tel,email,depart,adresse,dest, poids, adest,nombre,long,larg,prof,provenance,description,amount }) {

  return (
    <Container
      title="Devis "
      columnCount="12"
      className={style.container}
    >
      <Row
        cellSpacing={20}
        width="100%"
        style={{ borderTop: "1px solid #DCDCDC", backgroundColor: "#A9A9A9" }}
      >
        <img
          src="/logo.svg"
          alt="Joola"
          border="0"
          width="200"
        />
      </Row>
      <Row
        cellSpacing={20}
        width="100%"
        style={{ borderTop: "1px solid #DCDCDC" }}
      >
        <Column>
          <h3 style={style.h3}>
            Bonjour{" "}
            <span className="title_name" style={style.title_name}>
              {name}
            </span>
          </h3>
          <p>
            Merci pour votre commande. Elle est en attente jusqu’à ce que nous
            confirmions que le paiement ait bien été reçu. En attendant, voici
            un rappel de votre commande.
          </p>
          <p style={style.bande}>
            Veillez noter : Le colis doit arriver 2 jours avant le départ du
            container, sinon il partira avec le prochain.
          </p>
        </Column>
      </Row>
      <Row
        cellSpacing={20}
        width="100%"
        style={{ borderTop: "1px solid #DCDCDC" }}
      >
        <Column small="12" large="4" className="large-4 small-12">
          <p className="subtitle" style={style.subtitle}>
            Numero de commande
          </p>
          <p>{id}</p>
        </Column>
        <Column small="12" large="4" className="large-4 small-12">
          <p className="subtitle" style={style.subtitle}>
            Adresse de Joola bagages
          </p>
          <p>Joola Bagage 17 Avenue Foch, 67000 Paris</p>
        </Column>
        <Column small="12" large="4" className="large-4 small-12">
          <p className="subtitle" style={style.subtitle}>
            Date de départ
          </p>
          <p>{depart}</p>
        </Column>
      </Row>
      <Row
        cellSpacing={20}
        width="100%"
        style={{ borderTop: "1px solid #DCDCDC" }}
        size="12"
      >
        <Column small="12" large="8" className="large-8 small-12">
          <p className="subtitle" style={style.subtitle}>
            {" "}
            Adresse de facturation
          </p>
          <p> Nom: {name} </p>
          <p> Téléphone: {tel} </p>
          <p> Email: {email} </p>
          <p> Adresse: {adresse} </p>
        </Column>
        <Column small="12" large="4" className="large-4 small-12">
          <p className="subtitle" style={style.subtitle}>
            {" "}
            Adresse de destination
          </p>
          <p> Nom: {name} </p>
          <p>
            {" "}
            Lieu de collecte: {provenance} - {dest}{" "}
          </p>
          <p> Adresse: {adest} </p>
        </Column>
      </Row>
      <Row width="100%" style={{ borderTop: "1px solid #DCDCDC" }}>
        <p className="headtitle" style={style.subtitle}>
          {" "}
          Details Produits
        </p>
      </Row>
      <Row>
        <Column small="12" large="8" className="large-4 small-12">
          <p>
            {" "}
            Mesure(L x l x P) (cm):
             {long} - {larg} - {prof}{" "}
          </p>
          <p> Poids (kg): {poids}  </p>
          <p> Nombre: {nombre} </p>
          <p> Description: {description} </p>
        </Column>
        <Column small="12" large="4" className="large-4 small-12">
          <p className={style.subtitle}> Total </p>
          <p> Frais de devis: 1€ </p>
          <p> Total: {amount}€</p>
        </Column>
      </Row>
      <Row
        cellSpacing={20}
        width="100%"
        style={{ borderTop: "1px solid #DCDCDC", padding: "10px" }}
        valign="middle"
      >
        <p>
          Merci de votre attention. Nous comptons executer votre commande sous
          peu.
        </p>
      </Row>
      <Row
        cellSpacing={20}
        width="100%"
        style={{ borderTop: "1px solid #DCDCDC", backgroundColor: "#A9A9A9" }}
      >
        <p>
          {" "}
          Besoin d’aide ? <b>Contactez-nous</b>{" "}
          <a
            href="mailto:[email protected]"
            style={{ textDecoration: "none" }}
          >
            {" "}
            <i class="fa fa-envelope fa-lg"></i>
            <span
              className="ml-1"
              style={{ color: "#237a69", textDecoration: "none" }}
            >
              [email protected]
            </span>
          </a>{" "}
        </p>
      </Row>
    </Container>
  );
}

[gakimball]

What about the layout isn't working?

By the way, you don't need to include the large-x small-x classNames on each column—react-inky does it for you with the small and large props 👍

[Sowgenius]

What about the layout isn't working?

By the way, you don't need to include the large-x small-x classNames on each column—react-inky does it for you with the small and large props 👍

Yes. I know but i included it because the props small and large not seem to work.
i may be dumb but i know that having small="12" should make the column fullwidth.

I suppressed the props small and large and nothing changed.

What can I do to solve it ?