Responsive boxes in HTML Email - html
I use ActiveCampaign to send my emails, and recently I started building HTML emails to have better control of the situation.
ActiveCampaign automatically sets tables, so I don't need to worry about it, as it conforms a standard HTML to an email HTML.
I should have a responsive row with columns that wrap themselves once the user views the email on a mobile phone.
I'm trying to build some columns inside the email, I tried with flexbox but it constantly giving me errors in Gmail. I even tried with but it does not wrap content.
Here you can find the full code.
I highlighted the part where I have issues.
.divmain {
margin: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0 7px 0px #b5b5b5;
-webkit-box-shadow: 0px 0 7px 0px #b5b5b5;
box-shadow: 0px 0 7px 0px #b5b5b5;
}
.divp {
background-image: url("http://i67.tinypic.com/jhzs0g.png"), linear-gradient(90deg, #FD8571, #EEBD7C);
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
width: auto;
border-radius: 5px 5px 0px 0px;
padding-left: 5%;
padding-right: 5%;
padding-top: 7%;
padding-bottom: 7%;
margin-bottom: 0;
text-align: center;
}
.divs {
background-image: url("http://i66.tinypic.com/350w10h.png"), linear-gradient(90deg, #7172fd, #bc7cee);
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
width: auto;
border-radius: 0px 0px 5px 5px;
padding-left: 5%;
padding-right: 5%;
padding-top: 7%;
padding-bottom: 7%;
margin-bottom: 0;
text-align: center;
}
.divw {
width: auto;
padding-left: 7%;
padding-top: 5%;
padding-bottom: 1%;
padding-right: 27%;
text-align: left;
border-style: solid;
border-width: 0px 1px 0px 1px;
border-color: #cecece;
margin: 0;
}
.row {
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.column {
flex: 33.33%;
padding-left: 5%;
padding-right: 5%;
margin-bottom: 5%;
margin-left: auto;
margin-right: auto;
}
.columnbox {
width: auto;
border-radius: 8px;
padding: 5%;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #cecece;
-moz-box-shadow: 0px 0 7px 0px #b5b5b5;
-webkit-box-shadow: 0px 0 7px 0px #b5b5b5;
box-shadow: 0px 0 7px 0px #b5b5b5;
}
.row::after {
content: "";
clear: both;
display: table;
}
.border-div {
border-style: solid;
border-width: 0px 1px 0px 1px;
border-color: #cecece;
border-radius: 0 0 3px 3px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="divmain">
<div class="divp">
<h1 style="color:white; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em">Sei della Famiglia adesso!</h1>
<p style="font-size: 1.4em; color: white; line-height: 150%; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-top: 0; padding-top: 0">Moover non è un semplice servizio,<br> è una fantastica community!
</p>
<div class="btn" style="background-color: #4E69C2; text-decoration: none; display: inline-block; border: 3px solid #4E69C2; border-radius: 7px; font-size: 1.4em; padding: 0.3em 1em; -webkit-font-smoothing: antialiased; color: #fff;"><a class="btn-link" href="https://moover.digital/" rel="noopener noreferrer" style="text-decoration: none; color: #fff; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; font-size: 0.8em; font-weight: 600; -webkit-font-smoothing: antialiased;"
target="_blank">Scopri di più ►</a></div>
</div>
<div class="divw">
<p style="font-size: 1.1em; line-height: 150%; color: #3b3b3b; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif"><b>Oh! Eccoti!</b><br> Volevamo informarti che il servizio di Crescita Organica è stato attivato con successo sul profilo #%USERNAME%
</p>
<p style="font-size: 1.1em; color: #4E69C2; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em;"><b>Il periodo di Prova Gratuita durerà 7 giorni!</b>
</p>
<p style="font-size: 1em; line-height: 150%; color: #3b3b3b; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-top: 0; padding-top: 0;">(Goditeli fino in fondo!)
</p>
</div>
<!-- Here is where I have some problems -->
<p class="border-div" style="margin: 0; text-align: center; font-size: 1.2em; line-height: 150%; color: #3b3b3b; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; font-weight: bold; padding-bottom: 1em; padding-top: 1em; ">Questi sono alcuni dati attuali del tuo account</p>
<div class="row border-div desktop-view" style="padding-top: 1em; padding-right: 5%; padding-bottom: 3em; padding-left: 5%;">
<div class="column">
<div class="columnbox" style="margin-right: 5%;">
<p style="font-size: 1em; color: rgb(78, 194, 136); font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em; font-weight: bold; margin-top: 0.2em;">Follower Attuali</p>
<p style="font-size: 350%; color: #4E69C2; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em; font-weight: bold; margin-top: 0.2em;">99.000</p>
</div>
</div>
<div class="column">
<div class="columnbox" style="margin-right: 5%;">
<p style="font-size: 1em; color: rgb(78, 194, 136); font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em; font-weight: bold; margin-top: 0.2em;">Likes Attuali</p>
<p style="font-size: 350%; color: #4E69C2; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em; font-weight: bold; margin-top: 0.2em;">99.000</p>
</div>
</div>
<div class="column">
<div class="columnbox" style="margin-right: 5%;">
<p style="font-size: 1em; color: rgb(78, 194, 136); font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em; font-weight: bold; margin-top: 0.2em;">Commenti Attuali</p>
<p style="font-size: 350%; color: #4E69C2; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em; font-weight: bold; margin-top: 0.2em;">99.000</p>
</div>
</div>
<div class="column">
<div class="columnbox" style="margin-right: 5%;">
<p style="font-size: 1em; color: rgb(78, 194, 136); font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em; font-weight: bold; margin-top: 0.2em;">Engagement Rate</p>
<p style="font-size: 350%; color: #4E69C2; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em; font-weight: bold; margin-top: 0.2em;">99.000</p>
</div>
</div>
</div>
<!-- Here is where my problems finishes -->
<div class="divs">
<h1 style="color:white; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-bottom: 0; padding-bottom: 0.2em">Entra nell'Area Personale!</h1>
<p style="font-size: 1.4em; color: white; line-height: 150%; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; margin-top: 0; padding-top: 0">Visita la tua Area personale cliccando qui.<br> Potrai tenere traccia dei tuoi risultati!
</p>
<div class="btn" style="background-color: #4E69C2; text-decoration: none; display: inline-block; border: 3px solid #4E69C2; border-radius: 7px; font-size: 1.4em; padding: 0.3em 1em; -webkit-font-smoothing: antialiased; color: #fff;"><a class="btn-link" href="https://app.moover.digital/analytics" rel="noopener noreferrer" style="text-decoration: none; color: #fff; font-family:Open Sans,Roboto,San Francisco,Helvetica,Arial,sans-serif; font-size: 0.8em; font-weight: 600; -webkit-font-smoothing: antialiased;"
target="_blank">Visita la tua Area ►</a></div>
</div>
</div>
</body>
</html>
The result should be a responsive row that, on the desktop has 4 columns aligned in a unique row. In mobile, it should be a vertical row like in the screenshot below:
Unfortunately, this is not the result that I have, and I absolutely need some help, because in Gmail App from Mobile Phone this is what I got:
A few points:
Don't use flexbox in email unless you are confident with email coding in general. I've tweaked some of your code (expanding the flex:#%; to flex:0 0 #%; and adding a fallback width) and noticed I fixed some things so I don't think the implementation you've taken from front end is working in email clients as you would expect
There are quirks and fixes you need to include for different email
clients that you should be aware of. Google this for help, not sure
of any articles in particular as I haven't bothered trying to shoe
horn Flexbox into my emails. But some have so definitely do some
searching and you'll find some help.
The same goes with using divs in email. It can be done and many use
them but you need to know how to make them work in say Outlook
desktop clients etc. FYI, your email is completely broken in
Outlook, including the latest versions I can see in Litmus which is
Outlook 2019.
You may not need to support Outlook and that is fine, but it's good to know.
Invest in a testing platform. Litmus and Email On Acid being the top tools.
That way you can build and test and ensure your emails are working where they need to.
Overall, just be really cautious with pulling front end techniques into email. They won't all work but there are some in the community who have found ways to make Flexbox, CSS Grid and a few other popular front end techniques, work in email so do some research and you'll have a guide to follow.
Personally, I don't see the need to use up to date techniques like this. Using the good old table structure works for the most part.
Don't get me wrong, I have fun and test out the latest innovations and build stuff for fun but I always go back to the old phrase 'if it ain't broke, don't fix it'.
Email code isn't pretty and it isn't perfect but it works for 99% of designs out there and it's personal preference to implement fancy techniques like Flexbox etc.
And always remember that you want to use a technique that is easy to maintain. You don't want to hit issues like these every single time you try to update. It's time consuming and can be frustrating when you just want to get an email out.
I hope you can find a resolution for this though. Either through someone helping you with your Flexbox implementation, finding blog posts on doing this in email or by starting from scratch with code you're more comfortable with / is better supported and is easier for people to debug for you.
Related
This button's "padding" makes no sense
I was trying to make a button with a red border thats in the bottom and in the middle, but, its padding doesn't let me! You can see with the border, its like 100% width, it makes no sense.
Ive tried everything, the only "solution" i found, was to set the margins to something like 200px, but the hitbox is still massive in the x axis, if someone knows what might becausing this i'd appreciate an answer, thank you!!
HTML:
<div class="message">
<h1>NA CONJUGAÇÃO DO COMPROMISSO, DO ACOMPANHAMENTO E DA ATENÇÃO.</h1>
<h3>A colaboração de todos é fundamental para a concretização dos pressupostos de uma escola que todos queremos.</h3>
</div>
<div class="button">
<a href="example.com">
<div class="ano-letivo">Ano Letivo</div>
</a>
</div>
CSS:
h1 {
font-family: 'Abril Fatface', cursive;
color: white;
text-align: center;
padding: 80px 300px 5px;
font-size: 60px;
text-shadow: 0px 2px 3px black;
}
h3 {
font-family: 'Roboto Slab', serif;
color: white;
text-align: center;
text-shadow: 0px 2px 3px black;
}
.ano-letivo {
text-align: center;
color: white;
font-weight: 600;
padding: 10px;
border: 3px solid rgb(255, 69, 59);
}
How it looks: (except background)
A commenter correctly points out that you should probably change your element from div to button. However, if for some reason you need to keep the element as-is, adding the following CSS rules should center it:
width: fit-content;
margin: 0 auto;
display: block;
Here's a demo:
h1 {
font-family: 'Abril Fatface', cursive;
color: white;
text-align: center;
padding: 80px 300px 5px;
font-size: 60px;
text-shadow: 0px 2px 3px black;
}
h3 {
font-family: 'Roboto Slab', serif;
color: white;
text-align: center;
text-shadow: 0px 2px 3px black;
}
.ano-letivo {
font-weight: 600;
padding: 10px;
border: 3px solid rgb(255, 69, 59);
width: fit-content;
margin: 0 auto;
display: block;
}
<div class="button">
<a href="example.com">
<div class="ano-letivo">Ano Letivo</div>
</a>
</div>
Trying to make div move to another div
So I am trying to make it look like this
However, it currently looks like this
As, you can see the top section with the logo and register have their own section. I want it to stay on top of the background image. I do not want to use position: absolute; or position : fixed; since i want it to say in its own section. I have also tried using a negative margin and it does not work. Any help is appreciated.
.top-firstsection {
display: flex;
}
.logo-header {
height: 80px;
}
.nav-list {
margin-left: auto;
list-style: none;
display: flex;
}
.leftandright {
display: flex;
justify-content: space-between;
}
.login {
font-family: Helvetica;
font-size: 13px;
color: #000000;
letter-spacing: 0.98px;
text-align: center;
text-decoration: none;
line-height: 26px;
cursor: pointer;
}
.register {
font-family: Helvetica;
font-size: 13px;
color: #0972D7;
letter-spacing: 0.98px;
text-align: center;
text-decoration: none;
line-height: 26px;
}
.first-left {
padding-top: 220px;
padding-left: 171px;
}
.first-left h1 {
font-family: Poppins-Regular;
font-size: 40px;
color: #000000;
letter-spacing: 0;
line-height: 50px;
}
.sectionOne-textbox {
border: 1px solid #EBEBEB;
border-radius: 4px;
font-family: Helvetica;
font-size: 14px;
color: #000000;
letter-spacing: 1.05px;
line-height: 52px;
width: 80%;
}
.sectionOne-button {
background: #1F8FFB;
border-radius: 4px;
border: 1px solid;
padding: 16px 25px;
font-family: Helvetica;
font-size: 13px;
color: #FFFFFF;
letter-spacing: 1.3px;
text-align: center;
margin-top: 24px;
}
<section class="first-section">
<div class="top-firstsection">
<img src="logo.svg" alt="logo" class="logo-header">
<ul class="nav-list flex">
<li>
LOGIN
</li>
<li>
REGISTER
</li>
</ul>
</div>
<div class="leftandright">
<div class="first-left">
<h1>Open marketplace <br> for ordering & purhasing <br> scientific experiments</h1>
<input type="text" id="" class="sectionOne-textbox" placeholder="Discover new experiments...">
<button class="sectionOne-button">GET STARTED NOW!</button>
</div>
<div class="first-right">
<img src="firstsectionbackground.png" alt="main graphic" class="main-graphic">
</div>
</div>
</section>
Made my footer to my website, but when I zoom into the page, the whole thing becomes overlapped
I'm new to html and css, but I'm trying to teach myself how to make a decent looking website. I've gotten to the footer portion of the website and I thought I created well since it looked as I wanted, but when I zoomed into the page, the elements in the footer all began overlapping with one another. Could someone help me out by showing me how to fix this issue. Any help is appreciated.
My current footer:
.footer {
background: #323132;
text-transform: uppercase;
width: 100%;
height: 350px;
color: white;
}
.footer a {
text-decoration: none;
color: #a2a4a7;
font-family: Arial,sans-serif;
font-size: 14px;
}
.vertical-right-1 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 20%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-2 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 45%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-3 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 70%;
box-shadow: 0.2px 0.2px;
}
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 10px 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div class="vertical-right-1">
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;">Need To Talk?</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div class="vertical-right-2">
</div>
<div style="float:right; margin: 0 auto; width: 330px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;"><strong>Sports</strong></p>
<p>Soccer</p>
<p>Basketball</p>
<p>NFL</p>
<p>Tennis</p>
</div>
<div class="vertical-right-3">
</div>
<div style="margin:0 auto; width:630px; padding:4px 0 0 0;">
<strong>
<p style="font-family: 'Cabin Condensed', sans-serif; font-size: 20px;">About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
<a href="#"><i class="fa fa-facebook"
style="padding: 25px;font-size: 30px; width: 80px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<!-- <a href="#"><i class="fa fa-twitter"
style="padding: 2px;font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<a href="#"><i class="fa fa-instagram"
style="padding: 2px;font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a> -->
</div>
As you can see, the lines are all overlapped, and it looks just wrong. If you view it in full screen mode it looks as it should.
Hope someone can lend a hand!
You're going to want to set up some breakpoints which will allow you to alter CSS for different screen sizes. Also, I wouldn't use absolute and left to position elements on a page, unless in particular circumstances. What you want to do instead is use grid or flexbox, it will make life much easier in the future.
Word break not working even though max-width showing <p> smaller than max
I am trying to do the simplist thing on my app but I can't quite get it to work. All I want is for the word 'Assessment'. To be on the next line down.
I have used the following css to create the div around it and the text itself.
#name{
height: 60px;
background-color: #353A50;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px;
p{
font-family: Gibson SemiBold;
font-size: 14px;
color: white;
margin: 0;
line-height: 16px;
max-width:30px;
word-wrap:break-word;
}
}
And the HTML:
<div class="template-option">
<div id="image"></div>
<div id="name">
<p>{{template.title}}</p>
</div>
</div>
Anything stupid I am doing?
Expected result:
Fire Risk
Assessment
All that was required is the following: white-space: normal;
Define a width for your p and give it display block:
#name{
height: 60px;
background-color: #353A50;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
p {
display: block;
width:60px;
font-family: Gibson SemiBold;
font-size: 14px;
color: white;
margin: 0;
line-height: 16px;
}
}
Big height out of nowhere
Somehow one of the group of the same block elements on the picture gets inexplicably big height. Styles shown on the pic don't suggest that kind of behavior for this element. In fact, height isn't even set for those h3's.
Browser screenshot
The html is
<section class="about-us">
<div class="wrapper clearfix">
<h2 class="about-us-heading section-heading red-black-stressing-line-at-left">About Us</h2>
<p class="about-us-statement section-saying about-us-saying">This is who we are - or at least who we strive to be...</p>
<div class="about-more">
<p class="about-saying">If you can't explain it simply, you don't understand it enough.</p>
The more you know
</div>
<div class="about-work-details">
<h3 class="about-details-heading typography-icon">Typography</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading curve-with-dots-icon">Full icon set</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading triangular-ruler-icon">Accurate</h3>
<p class="about-details-text">...</p>
</div>
</div>
</section>
Three same div.about-work-details elements.
The default css is
.about-us{
background-color: #fff;
position: relative;
}
.about-us-heading{
color: #272d32;
}
.about-us-statement{
color: #4e5860;
margin-bottom: 3.9em;
}
.about-more{
width: 16.875em;
float:left;
margin-right: 1.875em;
}
.about-saying{
font-family: "Open Sans", sans-serif;
font-size: 1.75em;
line-height: 1.4285;
color: #4e5860;
}
.about-more-link{
display: inline-block;
font-family: "Raleway", sans-serif;
line-height: .77;
padding: 1em 2.625em 1em 1.25em;
text-decoration: none;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #ff3c1f url(../images/left-arrow.gif) 12.7em .95em no-repeat;
margin-top: 4.25em;
transition: background-color 0.5s;
}
.about-work-details{
width: 16.875em;
float:left;
margin-right: 1.685em;
margin-bottom: 8.1875em;
position: relative;
min-height: 16.875em;
border: 1px solid #edeff2;
}
.about-work-details:last-of-type{
margin-right: 0;
}
.about-details-heading{
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25em;
color: #303030;
text-transform: uppercase;
padding: 0.85em 0 1em 3em;
margin: 1.70em 0 0 1em;
}
Media query modifications
#media screen and (max-width: 860px){
.about-work-details{
width: 70%;
margin: 3em auto;
min-height: 0;
float: none;
}
.about-us{
padding-bottom: 1px;
}
.about-work-details:last-of-type {
margin-right: auto;
}
}
Seems like a floating item behavior issue. Try removing/commenting float:left; from .about-more.