I'm trying to build a responsive HTML email. I'm attempting to do something fairly simple but getting stuck and am starting to be convinced that I may need to approach it in a different way.
I want to show certain content if the user is on a mobile device, and hide it otherwise.
My first attempt looked like:
The CSS in the head:
#media (max-width: 420px) and (min-width: 100px) {
.mobile {
display:block !important;
}
}
The HTML:
<div class='mobile' style='display:none;'>
I'm only visible on mobile :)
</div>
This works beautifully for most mail clients but not with Gmail which does not support 'display:none' without an '!important'. But, adding the !important to the inline styles means that it will not display for mobile.
I've tried a few different things including messing with visibility/opacity (figured that would be a start in the right direction, but that didn't work at all) and trying to sneak around inline styles by attempting:
The CSS in the head:
.mobile {
display: none !important;
}
#media (max-width: 420px) and (min-width: 100px) {
#fix .mobile {
display:block !important;
}
}
The HTML:
<div id='fix'>
<div class='mobile' style='display:none;'>
I'm only visible on mobile :)
</div>
</div>
But that didn't work either. Seems like it would be a pretty common problem.
Any ideas how to get around this?
Ah the beauty of software development: we get to just keep trying until things work! Found a fix. It seems like there is more than one way to get around Gmail's display: none (!important on the inline style is not the only way). Here's what worked for me:
The CSS in the head:
.mobile {
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
padding: 0;
}
#media (max-width: 420px) and (min-width: 100px) {
.mobile {
display:block !important;
line-height: 1.5 !important;
max-height: none !important;
}
}
The HTML:
<div class='mobile' style='display:none;font-size: 0; max-height: 0; line-height: 0; padding: 0;'>
I'm only visible on mobile :)
</div>
How about using:
<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>
Related
I'm having some trouble using a media query. It's quite a basic thing but for some reason is not working.
Basically, I have a border around a div tag:
<div class="container games mobile">
<div class="row">
<div class="col-lg-8 div border">
<!-- This div tags are closed at the end of the file -->
I'm using bootstrap and don't honestly know if that can be part of the problem but what I wanted to do was to remove that border whenever the user was in a mobile, and to do so, I added the following lines in my css file:
#media screen and (max-width: 600px) {
.border {
border: none;
}
}
Border on computer
Border on mobile even though I used the querie
(added a grey square on both prints because the content doesn't really need to be in here but a live preview can be found here)
Could the issue be parent>child related?
Thanks in advance!
It's not working because it's being overwritten by bootstrap code. Try this:
#media (max-width: 600px) {
.border {
border: none !important;
}
}
Use css specificity here instead using !important. why not !important?
#media screen and (max-width: 600px){
.games.mobile .border {
border: none;
}
}
I have this html tag to put an arbitrary image on a page.
<img src="https://example.com/wp-content/uploads/....186.png" width="133" height="13" style="float:right; margin-right: 100px; margin-top: 40px;" />
However, I dont want this image on mobile. Can this be done?
It is better to be mobile first.
select class for your image. for example hide-mobile. then write these codes:
.hide-mobile
{
display: none;
}
#media only screen and (min-width: 500px) {
.hide-mobile
{
display: block;
}
}
You should take a look at media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
To hide the image, you would need a media query with display:none, which is only included on a low resolution.
#media only screen and (max-width: 500px) {
img {
display: none;
}
}
EDIT: It is not a good idea to define your style inline. You should rather use a seperate css file or at least a <style> block in your header. This helps with controlling different scenarios and keep your styling consistent over multiple objects and pages.
Im trying to create a responsive design here through media queries - so far it's been going pretty well, although i just hit a wall!
I have a h1 in my header which is pretty long, so when the screen gets small enough, it won't fit in - and ruins the responsive idea.
What i am asking is, is it possible to change the content in my h1 when the gets - lets say 500px wide? (example)
Right now my h1 is "CARSTEN ANDERSEN", and i would like it to change to "CARSTEN" at 500px.
Thanks in advance
<h1>Carsten <span class="hide-when-narrow">Andersen</span></h1>
<style>
#media (max-width: 500px) {
.hide-when-narrow {
display: none;
}
}
</style>
Since this is a question of content, it should be handled in the markup.
You could hide the excess words/letters by using max-width with overflow: hidden (use white-space: nowrap to force one line):
h1 { border:1px solid red; }
#media (max-width: 500px) {
h1 { max-width: 158px; overflow: hidden; white-space: nowrap; }
}
<h1>CARSTEN ANDERSEN</h1>
JSFiddle: https://jsfiddle.net/azizn/cs5ttm7s/
You need to change the content property
h1:before {
content: 'CARSTEN ANDERSEN';
}
#media only screen and (max-width: 500px) {
h1:before {
content: 'CARSTEN';
}
}
<h1>
</h1>
Something like this?
I'm currently creating a responsive email template, and i have got to the testing stage and found out that Google remove any classes you add to your tables.
I have tried using an ID as well, but they strip that as well as any data-attributes I tried.
I read up about this alittle and came across a little trick to bypass this. I managed to get this to work, but not it seems to be broken again. This trick is as follows
<table id="container" lang="x-container" title="container" class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px;margin: 0 auto;">
and the CSS would be
[title~=container] {
width: 100% !important;
}
but Google seems to strip that form my styling. Once i add * in front of the selector it stays in my css but my element doesnt seem to pick it up.
So my question is. What is the best way to target an element in gmail with media queries if you cant use ID or Class?
You can use the following:
* [summary~='fakeclassname'] {
styles: here;
}
"Summary" is one of the attributes that Gmail does not strip out. After it occurred to me what Gmail was actually doing to emails I found this article that breaks it down in detail:
http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/
There are helpful links on that page that get deeper into Gmail-specific targeting.
EDIT: it appears Exact Target strips out the "summary" attribute in ET Send Preview. The "title" attribute works fine if you want it to look correct in both Gmail and ET Preview.
This approach seems to do the job for me currently:
Styles in <head> of your e-mail template (these are removed in Gmail, but do apply for other clients):
<style type="text/css">
/* Styles below are applied on all clients except Gmail */
/* Desktop */
div[id=tablet],
div[id=mobile]{
display: none;
}
/* Tablet */
#media only screen and (max-device-width: 1024px){
div[id=desktop],
div[id=mobile]{
display: none !important;
}
div[id=tablet]{
display: block !important;
font-size: 15px !important;
max-height: none !important;
overflow: visible !important;
}
}
/* Phone */
#media only screen and (max-device-width: 736px){
div[id=desktop],
div[id=tablet]{
display: none !important;
}
div[id=mobile]{
display: block !important;
font-size: 15px !important;
max-height: none !important;
overflow: visible !important;
}
}
</style>
HTML:
<body>
<div id="desktop">
[template for desktop]
</div>
<div id="tablet" style="font-size: 0; max-height: 0; overflow: hidden;">
[template for tablet]
</div>
<div id="phone" style="font-size: 0; max-height: 0; overflow: hidden;">
[template for phone]
</div>
</body>
I want to hide my menu icon on smartphone screens but the media query isn't working. Can anyone shed some insight?
I tried looking at some other answers on here but nothing really helped as I am checking it by re-sizing my browser but I'm using max-width so it should still show.
I have three different logos. One for desktop, one for tablet, and one for mobile. Right now I'm trying to hide my desktop logo for mobile and it's not working so I thought I would try to find out why before trying to hide/reveal any more images.
UPDATE: SOLVED. I'm not sure why it works but after constant refreshing and 30 minutes later it works.
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
#menu-logo {
display: none;
}
}
<div id="header" class="header">
<img id="menu-logo" src="../images/logo.svg"/>
<img id="menu-logo-semi" src="../logo-semi.svg"/>
<img id="menu-logo-small" src="../logo-short.svg"/>
</div
There's no need to have 3 links.
A better way to do this is as follows:
<div id="header" class="header">
<a class="logo" href="/index.html">My cool name</a>
</div>
<style>
<!-- Desktop -->
.logo {
display: block;
text-indent: -9999px;
width: 200px;
height: 82px;
background: url(logo.svg);
background-size: 100px 82px;
}
<!-- Tablet -->
#media all and (max-width: 64em) and (min-width: 48em) {
.logo {
width: 80px;
height: 60px;
background-size: 80px 60px;
}
}
<!-- Mobile -->
#media all and (max-width: 48em) {
.logo {
width: 50px;
height: 30px;
background-size: 50px 30px;
}
}
</style>
Cleaner code.. Just change your logo sizes as you need.
EDIT
I don't know if your logo changes visually on each screen resolution interval. If so, just state another "background: url ..." rule on each media query, before the "background-size". If not, it will be ok since it's a vector, as long as the proportions are correct.
The cause is most likely due to CSS specficity, and the order of things in your stylesheet(s). We need to see all of the CSS affecting the #menu-logo item, and the img generally, especially the default (ie non-media query) CSS, and any other media queries that affect this menu-logo item.
And we also need to know whether such CSS comes before or after the media query - the order of things is very important. (NB: I know really this would be better as a comment rather than a full answer, but I don't have enough rep for that yet!)
So look at the specificity, and the order, then if still flummoxed give us more of the CSS (or the whole stylesheet if it isn't too long).