Responsiveness #30
Description
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>
);
}