I have added a code block on top of my dynamic email template (code given below). It looks perfect in Preview mode, but entirely different when actual email is sent
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
color: #000000;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<img src="http://cdn.mcauto-images-production.sendgrid.net/1714a3d54002df2a/a0f350e5-2a93-4de4-9d6b-a747ccb068a0/626x240.png" style="width:100%;">
<div class="centered">CA {{first_name}}</div>
</div>
</body>
</html>
What I am trying to achieve is some text in center of an image. Is there something wrong/missing in my code? Kindly guide me on this. Thanks!
Twilio SendGrid developer evangelist here.
That isn't working because position: absolute does not work in many email clients. This is also why it is important to test your emails in email clients after you have used preview mode.
Check out this article on faux absolute position and this article on overlays they should point you in the right direction to fix this up.
Related
Is there any way I can change the UI of DartPad from Dark to Light or vice-versa?
I didn't find any button on the DartPad to do so.
There is no lightmode for DartPad, even though there are some requests.
Also see this issue.
I've just installed the chrome extension 'Invert!' which worked. Not wonderful colouring but better than black for me.
It seems that they support specifying a theme when embedding via iframe.
So if you want light theme, you can create local dartpad.html (or whatever .html) file and place this code into it:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
iframe {
display: block;
border: none;
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<iframe src="https://dartpad.dev/embed-dart.html?theme=light"></iframe>
</body>
</html>
I also placed the same file to GitHub Pages, so you just can use this link: https://ivanzoid.github.io/dartpad-light/
So after 25 years of running www.unixnerd.demon.co.uk I have to change it to www.unixnerd.co.uk as Vodaphone are ditching all old Demon users. The site is one of the oldest BMW resources on the internet, it has loads of links and a good page rank.
Pardon my ignorance, but is there some way I can redirect traffic to the new site without the ability to host the old domain name?
If this question is inappropriate and someone cancels it PLEASE give me some guidance as to reposting it correctly. I have little knowledge in this area.
Sadly, I do not see a solution around keeping your domain. Here is the relevant code towards building a page to redirect to your website.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="10;URL=http://www.unixnerd.co.uk">
<meta charset="UTF-8">
<title>NEW ADDRESS</title>
<meta name="description" content="Our site has moved to a new address. Please note the change of address." >
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<style>
body{
font-family: 'Noto Sans', Arial, serif;
font-weight: 400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height: 1.618em;
background: #464646 url('car1.jpg') center center no-repeat fixed;
background-size: cover;
}
h2{
font-family: 'Noto Sans', Arial, serif;
font-weight: 700;
font-size:40px;
line-height: 1.618em;
}
section{
max-width:800px;
margin:8% auto 1em auto;
background-color:#222;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
color:#fff;
padding:1em 5%;
}
a{
color: #00CC66;
}
a:focus{
outline:none;
outline-offset:inherit;
}
#media (max-device-width: 1027px) {
body{
text-align:center;
font-size:larger;
}
section{
max-width: 90%;
}
}
#media (max-device-width: 640px) {
section{
max-width: 97%;
}
}
</style>
</head>
<body>
<section>
<h2>Our Site has moved!</h2>
<h3>The service you want to use can be reached at www.unixnerd.co.uk</h3>
<h3>...You will be transferred to the new site in a moment...</h3>
<p>If you have waited more than a few seconds and you are still seeing this message, please click on the link above! Thank you.</p>
</section>
</body>
</html>
things to note*
1. download an image from https://www.pexels.com/search/website%20background/
2. place the image in the same directory as your index file (where this html code is located)
3. under the styling tags, look for
font-family: 'Noto Sans', Arial, serif;
font-weight: 400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height: 1.618em;
background: #464646 url('car1.jpg') center center no-repeat fixed;
background-size: cover;
}
and change
background: #464646 url('car1.jpg') center center no-repeat fixed;
to the name of the picture file you downloaded and its extension.
This should redirect to your page automatically in ten seconds, and it should still keep professional integrity.
If the domain still functions, you could add a page as an index explaining that your site has migrated to a new domain name with a link. If this is a route you want to go towards, I am happy to provide you the page to use as the index in this discussion. As for the page rank, your website should already have a decent page rank minus the traffic. The people who are actively viewing your site and that see your link to the new domain name will help you gain the traction back and help you score higher on the search rankings. EDIT: I have visited your website that will soon be deprecated, a few things to mention is that you want to add an SSL ticket and use better layout practices to score higher on search rankings. You still have time now to add the index page to redirect traffic to your new website.
Hi I have this code in my Sencha gXt app which purpose is to change when user click on login button then show another page as follows:
String url = GWT.getHostPageBaseURL() + "MyApplicationFrame.html";
Window.Location.replace(url);
It's Redirecting but in MyApplicationFrame.html showing same login page. I have another class with frames. I want to show the control of that class.
MyApplicationFrame.html
enter code here
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="MyFirstGXT.css">
<link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css">
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript" src="myfirstgxt/myfirstgxt.nocache.js"></script>
</head>
<body>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
I have this site here http://heyheyandco.com/ and I dont know what is wrong with it on an iPhone.
It looks fine in Chrome, Firefox, IE, iPad but not iPhone.
Its like everything is being floated to the left for some reason.
Here is some of my css of my site (btw its a wordpress site)
.site-content article {
margin-bottom: 72px;
margin-bottom: 5.142857143rem;
padding-bottom: 24px;
padding-bottom: 1.714285714rem;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
padding-top: 15px;
}
.site-content {
float: left;
width: 65%;
margin: 1.714285714rem 0 0;
}
How do I find out what the problem is and how can I fix it?
For me it looks fine on the iPhone apart from the header which is not mobile friendly. Could you describe more about your problem? Maybe a screenshot...
Try testing for the devices resolutions here http://mattkersley.com/responsive/ where you can play around with the developer tools as well and see problems that occur on different types of devices.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
Use this in your html file...maybe you will get solution
I am creating an ordered list within a webview and I want to remove the indentation from the list, i.e. have the list aligned with the first paragraph. Here's HTML:
<body style="font-family: arial""font-size:18">
<p>First paragraph.</p>
<p>
<ol style="margin-left:0px">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
Notice that with the margin-left:0px, the webview still indents the list by about 17 points. If I say margin-left:-17px, I can make it work with a hack but would rather not as it seems more like I'm doing something wrong with the construction of my HTML.
Can anyone see any problems with it?
Updated HTML - Still doesn't work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
ol {
padding-left: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<p>
<ol>
<li>List item 1.</li>
<li>List item 2.</li>
<li>List item 3.</li>
</ol>
</p>
</body>
</html>
I'm using iOS 5.1 on iPhone 3GS
You can archive style like that with :
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Try This....
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
.flush-left {
padding-left: 25px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>
<ol class="flush-left">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
</html>
A couple of other pointers. Test your stuff out in test files in html on your desktop and load them into Safari and the iOS Simulator (Drag html file onto safari open in simulator).
But then you can use Regular Safari Debug tools to examine the html and css. or Firebug in Firefox.
Also, when in doubt www.w3schools.com ... :)
Perhaps I'm a bit late for your needs – I just came across this.
I only noticed this on my iPhone, and not my iPad, nor Safari on the Mac. I found that a bit strange that this issue would only be in the one version of Safari, and not all. I wasn't happening in Chrome either.
When looking in the Chrome developer tools, I noticed that the user agent stylesheet had added a number of -webkit prefixed styles, all to do with margin and padding:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
When I first saw that, I was wondering if that was the issue, but, it was late, and I had to take a sleep break. Today, I tackled it again, but forgot about these styles. I looked around, and came across #Remover's question. But, setting a specific pixel-based margin or padding didn't sit well with me.
At some point, I decided to narrow my browser window in Chrome, and low and behold the issue was there as well, only when I narrowed it to be close to the width of an iPhone. So, this isn't just an iOS issue. It's webkit.
I looked again at the styles in the dev tools, and saw again the -webkit styles, and the 40px on -webkit-padding-start. I played around with my css, and that was indeed the culprit.
I then added the following to my stylesheet:
ol {
-webkit-padding-start: 2em;
-ms-padding-start: 2em;
-moz-padding-start: 2em;
-o-padding-start: 2em;
padding-start: 2em;
}
I did some quick research, and it looks like only -webkit and -moz are using padding-start, but I added the rest, just in case they pick it up – though, now that Opera has switched to webkit, -o probably isn't needed.
In my case, I used 2em, as that worked with my style. Not sure if 2em will work across the board or not.
Edit
I should have also mentioned that it probably only shows up on small screens because it's set at 40px. In my design, my base font-size at full screen is 23px, and at 480px and below is 10px, which is quite a bit of a difference.
If you merely assign a padding of zero, the bullets go off the screen. I found that the following worked perfectly for my webview
ul,ol {padding-left: 20px;}
li {padding-left:2px;}
isn't it
<ul><li></li></ul>
not <ol> ?
also it looks the you might have a syntax error on your style for your body tag
:)
~ Dan