I have a node server that is sending emails templates.
When I'm opening that template locally it runs the CSS styles as properly at is should.
When I'm sending this as an a email to myself for testing some CSS doesn't apply.
CSS being received from a test email:
mainCon {
width: 936px;
background-color: #e9e9e9;
display: flex;
font-size: 24px;
border-radius: 0px 0px 20px 20px;
}
Original full CSS:
mainCon {
width: 936px;
height: max-content;
background-color: #E9E9E9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 0px 0px 20px 20px;
}
Server (nodemailer):
const mailOptions = {
from: "email#yahoo.com",
to: "email#yahoo.com",
subject: `sub`,
template:'index',
context: {
fullName: req.body.fullName,
reason: req.body.reason,
problem: req.body.problem,
}
}
The CSS is inside the handlebars style component attached to the head
handlebars html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="mainCon">
<p class="title">title</p>
<div class="nameNreasonCon">
<div class="reasonCon">
<p>{{reason}}</p>
</div>
<div class="nameCon">
<p>{{fullName}}</p>
</div>
</div>
<div class="problemCon">
<p>{{problem}}</p>
</div>
</div>
</body>
</html>
Related
Like the question says, Is there any way to avoid the overflow x?
Many Thanks in advance
https://github.com/1GCONF/simple_social_media.git
enter image description here
#edit: found the answer:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/style.css">
<script src="main.js" async defer></script>
</head>
<body>
<section class="section">
<nav>
<div class="port_item">Nav</div>
</nav>
<div class="port">
<div class="port_item">Profile</div>
<div class="port_item">Berichten</div>
<div class="port_item">Component X</div>
<div class="port_item">Component X</div>
<div class="port_item">Component X</div>
</div>
</section>
</body>
<style>
#import url("https://fonts.googleapis.com/css2?family=Kameron:wght#400;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-shadow: 0 4px 4px rgba(25, 25, 25, 0.25);
font-family: 'Kameron', serif;
font-weight: 200;
}
body .section {
display: grid;
grid-template-columns: 2fr 7fr;
justify-content: center;
align-items: center;
outline: 2px solid red;
width: 75%;
margin: 5ex auto;
}
body .section nav {
outline: 2px solid red;
}
body .section .port {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
body .section .port .port_item {
outline: 2px solid red;
height: 250px;
}
</style>
</html>
Is responsive and Looks like this:
responsive grid without queries
This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 9 months ago.
so I'm trying to make the input field like this
image to see what I want to expect
and for some reason box-sizing:border-box doesn't work
I'm using chrome browser
am I doing something wrong?
.....................
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
#input-el {
box-sizing: border-box !important;
width: 100%;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
border-style: solid ;
border-width: 2;
border-color: #5f9341;
background-color: rgb(214, 229, 248);
color: black;
}
#input-btn {
margin: 10px 10px 0px;
font-size: 20px;
border-style:solid;
border-color: #5f9341;;
background-color: #5f9341;
color: aliceblue;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css">
<title>chrome extension</title>
</head>
<body>
<!-- input field for writting inside -->
<div>
<input type="text" id="input-el" />
</div>
<!-- save button to save the input -->
<div>
<button id="input-btn">SAVE INPUT</button>
</div>
<script src="index.js"></script>
</body>
</html>
You should be doing this:
width: calc(100% - 20px);
I'm using a template for a weekly newsletter and I'm trying to keep all the images that get piped in to the newsletter to be the same size. Here's the current code:
<img src="xxx {{ content.thumbnail_uri }}" width="340"
style="margin: 0;
color: #222222;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 19px;
padding: 0;
text-align: left;
font-size: 14px;
margin-bottom: 0;
width: 100%;
height: auto;
max-width: 340px;" />
The problem is that when the template gets generated there is an introduction that pushes down the left column and the image height on that size gets squished down. Is there a way that I can guarantee that the images stay the same height and width while still keeping it responsive for mobile?
I'd do something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
.image-holder {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
.image-holder img {
width: 100%;
}
</style>
<body>
<div class="image-holder">
<img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" alt="image1"/>
<img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" alt="image2"/>
<img src="https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg" alt="image2"/>
</div>
</body>
</html>
body {
background-color: #4dc6ff;
}
.paragrafacasa {
width: 500px;
margin-right: auto;
margin-left: auto;
background-color: #e8e8e8;
border: 2px solid black;
border-radius: 8px;
margin-top: 100px;
}
.paragrafacasa p {
font-size: 30px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title> Here is title </title>
</head>
<body>
<div class="paragrafacasa">
<p> Here is my text </p>
</div>
</body>
</html>
Just finished editing a site, but when I published the Samsung Internet application do not display background-color on div.
Everything is displayed correctly in Chrome, only the Samsung Internet encounters this problem. Below I attached 2 screenshots to understand better. Any solution?
Samsung Internet ,
Chrome
I have issue with background for element article. I use :nth-child(n), but they do not work correctly at my localhost. When I same code place to jsfiddle all is ok.
Code at my local is following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:: Nove pokusy s Yablkem ::</title>
<link rel="stylesheet" href="/ath/css/normalize.css">
<link rel="stylesheet" href="/css/yablko.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<article>Jsem ve středě?</article>
<article>Všichni co se moc ptají se nic nedozví...</article>
<article>Marmelada</article>
<article>Sýrové kuličky || Menu</article>
</body>
</html>
CSS (yablko.css)
html, body {
height: 100%;
}
body {
padding: 1em;
margin: 0;
background: orange;
font-size: 20px;
display: flex;
align-items: center;
justify-content: baseline;
justify-content: center;
flex-direction: row;
}
article {
padding: 1.2em;
background: #336dd1;
border-radius: .8em;
margin: 5px;
}
article:nth-child(1) { background: #888; }
article:nth-child(2) { background: #ccd; }
article:nth-child(3) { background: #333; font-size: 10px; }
article:nth-child(4) { background: #aaa; font-size: 30px; }
Image from local (bad result):
Image from jsfiddle (ok result):
Can I ask for help? Thanks