Using Windows Live E-mail, I make a signature and save the file which gives me the following code.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=utf-8">
<HTML><HEAD></HEAD>
<BODY dir=ltr>
<DIV dir=ltr>
<DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
<DIV> </DIV>
<DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
<DIV dir=ltr>
<DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>
<HR>
</DIV>
<DIV><IMG
style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN: 5px 20px 0px 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px"
title=pufs_mail_logo border=0 alt=pufs_mail_logo align=left
src="G:\Profile\PUFS\E-Mail\pufs_mail_logo.png" width=120 height=100></DIV>
<DIV><STRONG><EM>for Pak United Food Services Ltd.,</EM></STRONG></DIV>
<DIV>Tel : 0092 55 3885502</DIV>
<DIV>Fax : 0092 55 3885503</DIV>
<DIV>Web Site : www.pufs.org/</DIV>
<DIV>E-Mail : info#pufs.org</DIV>
<DIV>Address : Al Shafi Market, G.T Road</DIV>
<DIV>Gujranwala, Ghakhhar, 52200 – Pakistan</DIV>
<HR>
</DIV></DIV></DIV></DIV></DIV></BODY></HTML>
It works fine in IE9 and GG but in FF the image does not display and the alt text is shown instead. Please note that I have changed some code. The before code given was:
DIV><IMG
style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN: 0px 20px 0px 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px"
title=pufs_mail_logo border=0 alt=pufs_mail_logo align=left
src="cid:C7912B932AF345A9A29DC8E6F6BCAE8B#JawadPC" width=120 height=100></DIV>
Which I changed to
<DIV><IMG
style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN: 5px 20px 0px 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px"
title=pufs_mail_logo border=0 alt=pufs_mail_logo align=left
src="G:\Profile\PUFS\E-Mail\pufs_mail_logo.png" width=120 height=100></DIV>
Basically just changing the path to the image file.
I could use an absllute url, but that has some seceurity issues. How do I get this simple file to dsiplay the image. (DOCTYPE?)
The signature file should reside on a web server. You should be pointing to it using a fully-qualified URI: http://....
BTW - most web-based mail clients will rip off the HEAD and everything up to the BODY. Just use the HTML.
Related
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.
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.
I create a template on Sendgrid as a standard email, I tested on Gmail in different devices, it works fine, until I try Outlook, it looks like all of my css, images are gone. So what is the root cause?
Here is my html code:
<div style="font-family: 'Poppins', Helvetica, sans-serif;">
<div style="background-color: black; position: relative; padding-top: 30px; padding-bottom: 30px;">
<img src="image.png"
style="height: auto; width: 135px; position: absolute; top: 0; bottom: 0; margin: auto; padding-left: 16px;">
</div>
<div style="padding: 10px; text-align: center;">
<img src="image.png"
style="width: 40px; height: auto; margin-bottom: 16px;">
<p style="margin: 0; padding: 0; color: #00cc66; font-size: 24px; font-weight: bold;">Email Confirmation</p>
</div>
<div>
<div style="padding: 16px; color: black;">
<p>Hi -Name-,</p>
<p>Welcome.</p>
<p>Please confirm your email-address by clicking the button below.</p>
</div>
<div style="text-align: center; padding-bottom: 15px;">
<a href="-EmailConfirmUrl-" target="_blank">
<button style="border: none; cursor: pointer; background: #2840ff;
color: white; width: 200px; height: 48px; text-transform: uppercase;
font-size: 0.8rem; outline-style: none;
background-image: linear-gradient(to top right, #2840ff, #22eaff); box-shadow: 0px 1px 15px -2px lightgrey;">
Verify Email Now
</button>
</a>
</div>
<div style="text-align: center; background: #2840ff; color: white;
background-image: linear-gradient(to top right, #2840ff, #22eaff); bottom: 0; padding: 4rem 0;">
<img src="image.png"
style="height: 20px; width: 160px;">
<p style="color: #ced4da; font-weight: 300;">
Copyright © 2018. All rights reserved.
</p>
</div>
</div>
</div>
You can't use standard css3 in your emails, if it has to work in outlook.
Outlook is using the HTML rendering engine of Microsoft Word (sad, but true).
There are a lot of amazing tips and tricks on how to make email work in (all) clients.
Here are just a view links:
https://litmus.com/resources
https://mailchimp.com/resources/?_ga=2.98108630.81642254.1536052613-1816129050.1536052613
I have created 3 divs that line side-by-side on 1 row on desktop view but I would like each div to stack vertically on mobile devices only. I can't seem to figure out the correct CSS code/media query for this.
This is the HTML div code I'm using in the body of the post:
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 1
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 2
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 3
Here is the full HTML code--I am embedding 3 Instagram photos.
div style="float: left; width: 30%; margin-right: 3px;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BC2kmbmhTOY/" target="_blank">#CherryBlossom #Doughnuts: Vanilla Cream Cheese Glaze w/ a #Cherry Filling, and featuring a #CherryBlossomTree design made with Chocolate (tree) and Cherry Buttercream Flowers Available Soon! March 15 to April 17.</a>
A photo posted by Astro Doughnuts (#astrodoughnuts) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-12T12:17:51+00:00">Mar 12, 2016 at 4:17am PST</time>
/div></blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="float: left; width: 30%; margin-right: 3px;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BCq4otrp-ZW/" target="_blank">Spring truly arrives when flowers start blooming, and our #CherryBlossom macaron has certainly begun showing its petals! Sweet and subtle, it's the perfect spring bite. #oliviamacaron #frenchmacarons #springtime #GeorgetownDC #ShopTysons #DCeats</a>
A photo posted by Olivia Macaron (#oliviamacaron) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-07T23:22:02+00:00">Mar 7, 2016 at 3:22pm PST</time>
/div>
/blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="float: left; width: 30%; margin-left: 3x;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BDJCBpnAi8f/" target="_blank">🌸💕 Happy Saturday! 💕🌸</a>
A photo posted by Georgetown Cupcake (#georgetowncupcake) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-19T16:21:18+00:00">Mar 19, 2016 at 9:21am PDT</time>
/div>
/blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="clear: both; height: 1em;"></div>
You need to use media queries in your css to produce responsive layouts. It can't be done using inline styles.
At a minimum, and from a mobile first approach:
<div>
SOURCE 1
</div>
<div>
SOURCE 2
</div>
<div>
SOURCE 3
</div>
<style>
#media(min-width:768px){
div {
float:left;
width:30%;
margin-right:5px;
}
}
</style>
Here you have three stacked, full width divs. Once the browser or device is equal to or beyond the defined breakpoint of 768px, the new css takes effect to produce three side-by-side divs as defined in the css.
See example. You should use percentage dimensions
.col{
height: 100px;
background-color: red;
margin-bottom: 10px;
}
#media (min-width: 960px){
.col{
float:left;
width: 30%
margin-left: 10%;
}
.col:last-child{
margin-left: 0%;
}
}
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
.block{ text-align: center; width:30%; margin:0px; padding:50px 0; float:left;}
#media only screen and (max-width: 767px) {
.block{ width:100%;}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="block" style=" background: #f00;">
SOURCE 1
</div>
<div class="block" style=" background: #ccc;">
SOURCE 2
</div>
<div class="block" style=" background: #444;">
SOURCE 3
</div>
Please check hope so this will help full for you
There is different options to do that, but both use media queries.
You can either put each div on display: inline-block on desktop and change them to display: block on mobile. Maybe set a width: 33% for each div (otherwise if your div are too long they won't be side by side).
Or the other solution:
Put your parent element on display: flex on desktop and put it back on display: block on mobile.
.sub { background-color: rgba(200,200,200,0.6); box-sizing: border-box; border-right: 1px solid black; padding: 5px; }
.first { display: flex; }
.first .sub { width: 33.3%; }
.second { display: block; margin-top: 20px; }
.second .sub { width: 100%; }
/* media queries for mobile */
#media (min-width: 320px) and (max-width: 480px) {
.first { display: block; }
.first .sub { width: 100%; }
}
<div class="first">
<div class="sub">One</div>
<div class="sub">Two</div>
<div class="sub">Three</div>
</div>
<div class="second">
<div class="sub">One</div>
<div class="sub">Two</div>
<div class="sub">Three</div>
</div>
use <li> instead of <div>, then use display:inline-block; or display:block;
My website is currently breaking on several pages in ie7, ie8, and ie9, and of course its breaking in different ways in each browser. I've been trying to figure this out for hours and have nothing.
The problem in ie7-8 is that my various elements are not floating correctly I believe, but I'm not entirely sure.
Here are some screencaps
Here is a link to the test page: testsite
And here is the code:
<?php include("includes/header.html");?>
<div id="content">
<div id="toolbar" class="dropshadow" style="background-color: #181818">
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
<hr noshade color = "#373737"/>
<ul>
<li>
<a href="inventory.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Showroom','','images/toolbar/carhover.png',1)">
<img src="images/toolbar/car.png" alt="Showroom" name="Showroom" width="89" height="55" border="0" id="Showroom" style="margin-left: 7px;"/>
<h3>Our Vehicles</h3>
</a>
</li>
<li>
<a href="shipping.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shipping','','images/toolbar/shippinghover.png',1)">
<img src="images/toolbar/shipping.png" alt="Shipping" name="Shipping" width="97" height="55" border="0" id="Shipping" />
<h3>Shipping</h3>
</a>
</li>
<li>
<a href="financing.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Financing','','images/toolbar/financinghover.png',1)">
<img src="images/toolbar/financing.png" alt="Financing" name="Financing" width="89" height="55" border="0" id="Financing" />
<h3>Financing</h3>
</a>
</li>
<li>
<a href="insurance.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Insurance','','images/toolbar/insurancehover.png',1)">
<img src="images/toolbar/insurance.png" alt="Insurance" name="Insurance" width="64" height="55" border="0" id="Insurance" />
<h3>Insurance</h3>
</a>
</li>
<li>
<a href="auto-locator.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AutoLocator','','images/toolbar/autolocatorhover.png',1)">
<img src="images/toolbar/autolocator.png" alt="AutoLocator" name="AutoLocator" width="104" height="55" border="0" id="AutoLocator" />
<h3>Auto Locator</h3>
</a>
</li>
</ul>
</div>
<div id="searchbox" class="dropshadow">
</div>
<div id="advsearch" class="dropshadow">
</div>
<div id="links" class="dropshadow" style="background-color: #181818">
</div>
</div>
</div>
<div id="bannerads" class="dropshadow">
</div>
Here is the CSS sheet specific to this page. If you need the main page for the site I can get it for you, but that style sheet works fine on other pages so I believe the problem is here.
#charset "utf-8";
/* CSS Document */
#bannerads{
margin: 9px 0px 5px 6px;
float: left;
width: 728px;
height: 90px;
padding: 6px 128px;
background-color: #e9e7e4;
}
#toolbar{
float: left;
width: 984px;
height: 150px;
position: relative;
z-index: 1;
margin: 0px 6px 0px 6px;
background-color: #181818;
background-image: url(../images/toolbar.png);
background-position:right top;
background-repeat:no-repeat;
}
#toolbar hr{
float: left;
width: 600px;
margin: 4px 300px 0px 30px
}
#toolbar ul{
list-style:none;
padding:0;
}
#toolbar li{
float: left;
margin: 10px 0px 0px 31px;
}
#toolbar a{
color: #e9e7e4;
}
#toolbar a:hover{
color:#e9e7e4;
text-decoration:underline;
}
#searchbox{
float: left;
clear: both;
width: 446px;
height: 402px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#toolbar li h3{
color: #e9e7e4;
font-size: 13px;
margin-top: 4px;
margin-bottom: 10px;
text-align:center;
}
#advsearch{
float: left;
width: 446px;
height: 242px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#links{
float: left;
width: 446px;
height: 132px;
background-color: #181818;
margin: 8px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#arrow{
margin-left:-93px;
width: 68px;
height: 135px;
float: left;
position: relative;
}
.header1{
color: #e9e7e4;
font-size: 28px;
margin: 8px 0px 0px 30px;
float: left;
}
.header2{
color: #e9e7e4;
font-size: 16px;
float:left;
margin: 22px 0px 0px 220px;
}
#showinvheader{
color: #e9e7e4;
font-size: 14px;
margin-bottom: -2px;
text-align:center;
}
Lastly, here is the css sheet I'm using for compatibility with ie:
/* CSS Document */
.Navigation{
border: solid #181818 1px;
margin: -15px 5px 0px 5px;
}
.bigbox{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
.smallbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#banner{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#headerimg{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#contentbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads2{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#toolbar{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#featured{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#searchbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#advsearch{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#links{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
Well, for starters, your X-UA-Compatible header is messed up. You have a weird quot; value in there. This is likely preventing newer versions from rendering as IE7. However, you should probably just always render in standards mode, and make subtle changes for each browser using conditional comments.
If you must use the x-ua-compatible, then you should do it as an http header, rather than as a meta tag. PHP allows you to addheaders before it starts writing data to the client. Add the header there.
Upon further examination, your code is.. Crap. It's got 180+ validation errors, including things like putting block level elements in header elements. I would suggest making your HTML validate before anything else, as invalid code is the #1 reason for things to render differently on different browsers.
http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fspecialtysales.nfshost.com%2flookingtobuy2.php
Ok, sorry it took so long for me to write this...
The reason the code was malfunctioning was that a header tag didn't get closed.
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
So, if you're experiencing a similar problem make sure your tags are all closed.