I'm trying to code a responsive design email-- I've combed through here and couldn't find anything that exactly helped. I'm really not seeing any part of my #media query coming through-- the images are staying at the size I coded in the #media query, and not resizing back in browser. The mobile style for the fonts I've coded also aren't sticking. Here's some of the code:
<style type"text/css">
body {background-color: #e5e5e5}
p {
font-size: 13px;
font-family: verdana;
line-height: 21px;
color:#4B5460;
}
a {
font-family: verdana;
font-weight: bold;
text-decoration: underline;
color: #4B5460;
}
.footer_link {
font-weight: normal;
text-decoration: none;
color:#0c5bba;
font-size: 11px;
}
#media screen and (max-width:480px) {
.graf_font {
font-size: 16px;}
}
.reg_button {
max-width:200px;
}
.mobile_hide {
display: none;
}
.chiclets {
max-width: 100px;
}
.snapshot {
max-width:75px;
}
}
</style>
Let me know if you need more code-- I'm a beginner with this, so I know I'm missing something glaring!
Thanks!
It looks like you have an extra closing bracket.
.graf_font {
font-size: 16px;} /* <-- remove this bracket */
}
Also check to make sure the email client your in even supports media queries.
https://litmus.com/help/email-clients/media-query-support/
Max-Width is not fully supported for email. I have found using percentages to be a useful alternative (e.g. width=80%). If you can make images take up a certain percentage of the screen or table cell on mobile images instead of being a particular pixel width it may be more successful. If you still aren't having success, try adding !important after your CSS.
Also, you'll want to style your text inline, as a lot of that will get stripped by different email clients.
I would also suggest that you check out https://litmus.com/community. It is a newly free source with a lot of up-to-date info on email design and people who know a lot more about email design than me.
Related
I'm trying to get a button to have a responsive width based on the screen size. I've got it so it works perfectly when I resize a regular Chrome window, but when I toggle the display to mimic a device (any mobile device/ipad/etc.) the width of the button immediately gets much smaller. It looks the same even when I open it on my iPhone, so it's not just some weird issue with Chrome's tools. When I inspect the element, I can see that width has been disabled:
I thought there might be some CSS overriding it, but then that doesn't explain why this behavior disappears entirely when I'm simply resizing Chrome or even picking one of the devices with wider resolutions than any of my rules. I have still tried removing all of my #media rules and the behavior persists.
The button is pretty basic HTML, and it's not even wrapped up in a div that could be causing the issue (unless the fact that there's a flex box right under it could be a problem?):
<body>
<button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>
And all of the relevant CSS is here:
#ranking-button {
position: fixed;
top: 0;
right: 0;
margin: 20px;
font-family: 'Black Han Sans', sans-serif;
font-size: 24px;
color: black;
background-color: #ffcc00;
width: 40%;
height: 60px;
cursor: pointer;
border: 0em;
}
#ranking-button:hover {
background-color: black;
color: white;
}
button:focus{
outline: none;
}
#media (min-width: 600px) {
#ranking-button {
width: 200px;
}
}
I've also tried adding !important to it, and it then did work for mobile - but then stopped changing for any other resolution and was stuck at 40% all the time.
I'd given up on this minor side project, and then randomly realized what I'd done wrong while doing something completely different - in case anyone makes the same mistake as me, I'd managed to forget to set the viewport. Adding this made the CSS work:
<meta name=viewport content="width=device-width, initial-scale=1">
When you use a #media query, it does anything inside it when the 'rules' inside the brackets are accepted.
So, if you say that max-width:1000px then, if your browser is 600px then anything inside it will apply, if not, then it will be ignored.
For screens smaller than 600px, your normal #media css rule will be accepted and there you said width:40%, and you can't measure in %.
#media only screen and (max-width: 600px) {
#ranking-button {
width: 200px;
}
}
This is the codepen for my HTML layout for a magazine - link here.
I have been experimenting with the CSS and trying to achieve a more blog-like design with my CSS, to emulate the effect seen at https://www.autocar.co.uk/car-review/bmw/7-series/first-drives/bmw-7-series-750li-xdrive-2019-review
(well, the way the article and sidebar with other articles is; the article and Driven this week part)
Currently I have this CSS:
body {
background-color: gray;
font-family: Verdana, sans-serif;
font-size: 14px;
}
p {
font-family: Verdana, sans-serif;
font-size: 13px;
line-height: 21px;
}
header {
background-color: #FFFFFF;
}
div.article {
width: 800px;
height: auto;
background-color: #FFFFFF;
float: right;
overflow: auto;
padding: 5px;
}
div.article img {
height: 340px;
}
but what sort of padding etc. could I use while keeping the div.article as white (FFFFFF) and get the header to work more effectively with the title?
if the header is in anything but h1, h2, h3 etc. it doesn't quite work - example at forked codepen.io copy - https://codepen.io/anon/pen/pBgQjw
Although this uses Verdana here for ease of use, what's the best way of getting FontSquirrel fonts like OpenSans to work locally (i.e. not linking to online source, but the directory the fonts are in); I've often used .ttf when doing fonts other than Arial or Verdana.
I may be using Gotham font soon, but for now it's OpenSans and OpenSans Bold.
OpenSans Bold is for h1, h2 in the CSS soon.
This is only a testing page on localhost, but it maybe used as a template for a PHP site.
No Javascript is in use yet but if you have any good suggestions for ones that could work, I'd appreciate it. (I've kept the design simple for now).
The grey background will be kept, and div.article in white.
I would welcome any advice on how to turn this from looking rather staid into a more professional, blog-like design.
I think you should try to use a CSS framework, e.g. Bulma (which is lightweight and easy to use and based on CSS flexbox). See Bulma docs here: https://bulma.io/documentation/
As for the font implementation I think #font-face should do the trick - you just have to download the font to your server (or local device).
I'm developing a site on Ubuntu. When I look at it in Firefox, it's a lot smaller than when I view it in Chrome. Screenshots:
Both browsers have their default fonts set to DejaVu Serif at 16px. I haven't messed with Bootstrap's default font size. It's still 1rem.
What's accounting for this discrepancy, and is there a way to further normalize the differences between browsers?
EDIT: My scss, even though it's not relevant, because it was requested:
$theme-colors: (
"burnt-orange": #fa7334,
"light-blue": #67e2f5,
"dark-blue": #006f80,
"beige": #f5d5bc
);
.header-icon {
font-size: 1.4rem;
}
#jumbo {
background: transparent;
border: 1px solid grey;
}
#diva-sidebar ul {
list-style-type: none;
padding-left: 0.65em;
}
#footer a {
color: white;
}
.errors {
border: 1px solid #c70f36;
color: #c70f36;
background-color: #ffc0cb;
}
#import "~bootstrap/scss/bootstrap";
#import "~#fortawesome/fontawesome-pro/css/all.css";
.header-icon-link-blue {
color: theme-color("dark-blue") !important;
:hover {
color: theme-color-level("dark-blue", 2) !important;
}
}
.header-icon-link-orange {
color: theme-color("burnt-orange") !important;
:hover {
color: theme-color-level("burnt-orange", 2) !important;
}
}
.color-burnt-orange {
color: theme-color("burnt-orange");
}
EDIT: After adding
html {
font-size: 16px;
}
To my custom.scss file, but the problem persists.
I found a similar issue when designing sites using Bootstrap 4.x. The issue is Bootstrap uses the browser's default font size, and then sets relative font sizes from this. However, Firefox and Chrome seem to use a different default size, which causes issues most noticeably when you are using larger fonts on headings. The easiest solution is to set an exact base font size on the html to override the browser default, like so:
html {font-size:16px;}
I think, you need to prefix your css code. Because, all browsers has a prefix code so: -webkit, -o, -moz ets. Go this Link and past your css left column and copy css from right column: for example: Kindly mark it as Answer if it solved your problem :)
I am trying to draw a text-based GUI in HTML (just for fun) which looks like an old terminal app and I have ran into a problem:
When I have two lines (divs) and I put graphic characters in them like these:
░░░
░░░
I can't align the lines properly (vertically). If I just put terminal characters in my divs like this:
<div class="line">░█║▄▀</div>
<div class="line">░█║▄▀</div>
there is a little spacing between them. (probably height/line-height issue).
If I style them like this:
.line {
height: 1em;
line-height: 1em;
}
they overlap. I tried to fine-tune the values by hand but it seems that height and line-height does not work together well for example with font-size: 40px and line-height: 40px I have to use a height value of 45.5px. What is the problem with my approach? Is there a simple way to align my lines without fine-tuning?
Note that I zeroed all spacings/margins/paddings and I also checked the calculated css in developer tools so it is not an issue with either of these.
My base css is this:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
I'd add font-family: monospace at least, see fiddle.
But to be honest I'd go with a pre tag and if neccesary spans - and not do line by line div.
I've tested this on the edge browser. I don't know what will happen on other browsers.
Bare in mind that for smaller font sizes (under .5em), some glyphs may become obscured based on monitor resolution, browser, and size.
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
.line {
/* height: 1em; */
/* line-height: 1em; */
font-size: 5em;
}
</style>
</head>
<body>
<div class="line">░█║▄▀</div>
<div class="line">░█║▄▀</div>
</body>
</html>
I've taken to using rem's to size fonts in recent projects, then using px as a fallback for older versions of IE.
I've also been setting a font-size of 62.5% on thehtml so I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4rem on the body so unstyled elements have a base font-size of at least 14 pixels, see the code below:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.
SEE FIDDLE (HTML copied below for future reference)
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
</body>
</html>
Remember, you might need to hit run once or twice in Chrome to see said effect.
Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?
The easiest solution that I have found is to simply change the body definition to
body {
font-size: 1.4em;
}
Because it is the body, you don't have to worry about compounding – just use rems everywhere else.
Try:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial; }
Seems to look better on refreshing the page :)
FIDDLE
Yes, this is a known bug in Chrome, which has been linked already.
I found
html { font-size: 100%; }
seems to work for me.
The * selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:
body > div {
font-size: 1.4rem;
}
Provided you always have a wrapper div anyway ;)
This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem
The answer of Patrick is right.
We have the same issue on Android 4.4.3 WebView.
Before:
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
After:
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
With em and not rem, it works !
The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:
html {
font-size: 62.5%;
}
body {
font-size: 14px;
}
.arbitrary-class {
font-size: 1.6rem; /* Renders at 16px */
}