I can't get my email template to show the mobile version on Gmail. I've tried different solutions from various posts on here and nothing is working. The email is responsive in Apple Mail and even Samsung Mail. I included the css below, any help would be greatly appreciated as I've been stuck on this issue for at least a year now it seems.
<style type="text/css">
#media only screen and (max-width: 600px) {
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body[yahoo] .all {
width: 355px !important;
}
body[yahoo] .no-mobile {
text-indent: -99999em !important;
display: none !important;
}
body[yahoo] .mobile-only {
text-indent: 0 !important;
display: block !important;
height: auto !important;
visibility: visible !important;
overflow: visible !important;
max-height: none !important;
}
}
The first thing I see is the [yahoo] hack. Attribute selectors are not supported in Gmail. And the [yahoo] hack in itself is no longer needed since march 2015.
The second thing to be aware of with Gmail, is that no all versions of Gmail support <style> and media queries. If you're testing on Gmail mobile webmail or on a Gmail app (iOS or Android) with a non Gmail account (an Outlook.com email address for example), you won't have support for media queries there. I wrote about this here: Trying to make sense of Gmail CSS support.
Here’s a full code example that works in Gmail desktop webmail and mobile apps (iOS or Android) with a Gmail account. Here’s a link to test previews on Email on Acid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How do I get my responsive email to work in Gmail?</title>
<style>
#media only screen and (max-width: 600px) {
.all {
width: 355px !important;
}
.no-mobile {
text-indent: -99999em !important;
display: none !important;
}
.mobile-only {
text-indent: 0 !important;
display: block !important;
height: auto !important;
visibility: visible !important;
overflow: visible !important;
max-height: none !important;
}
}
</style>
</head>
<body>
<div class="all" style="background:green;">.all</div>
<div class="no-mobile" style="background:orange;">.no-mobile</div>
<div class="mobile-only" style="background:purple; display:none">.mobile-only</div>
</body>
</html>
Related
I m building a website on my laptop by watching an instructor's video.I have to set the same pixels with him, to follow the design they gave me. BUT the design he follows,and i have to do so, fits only when my browser's zoom is 90%. When i zoom in 100% the content overflows.The items are shown as they should when my zoom is 90%. In other words the design i have to follow does not work on 100%, which is the default on my browser by the way.Any other website that i m just looking on internet works on 100% perfcetly.
i have set :
*
body margin 0
all sections background sizes cover or 100%
if i have to specify more details, please it would be helpful to let me know
Thank u in advance.
body{
margin: 0;
font-family: "SourceSansPro", serif;
}
#media (min-width: 1280px) {
.container {
width: 1360px;
}
header {
height: 745px;
padding-bottom: 90px;
}
<html>
<head>
<link href="app2.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<div class="container">
I noticed a closing brackets error here:
#media (min-width: 1280px) {
.container {
width: 1360px; /* Why you set 1360px when min-width is 1280px? */
} /* Need to close this */
}
To find out how to solve the problem, it would be advisable to publish the page's html and css. It would be the best if you also post a screenshot to make us understand better what happens.
I am trying to show the horizontal scrollbar for my overflow by default, but in chrome + macos, it doesn't seem to be working. In Safari it works just fine.
the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
content that goes brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
</div>
</body>
</html>
the css (inline via style), on the parent container:
display: block;
width: 100px;
overflow: scroll
The screenshot:
If I manually click the box and slide...the scrollbar appears, but it's not the desired functionality.
This solution/hack seems to work for Chrome/Safari on Mac:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .5);
}
::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
So scrollbars are an OS and and application level setting depending on what you're using.
On mac I think you can turn them on and off for system screens, on chrome you used to be able to turn them on and off, but when I just went looking for the setting I couldn't find it in the latest version of chrome.
Unfortunately, beyond adding overflow: scroll to a div you have no other control over whether or not a scroll bar appears, and even if you get it to appear for yourself, there's zero guarantee that it will appear for your users.
You can check out this video of a guy changing his own Chrome settings (https://www.youtube.com/watch?v=VTLHxboMivM) but like I say, I just had a look in the current version and couldn't see it.
I am trying to use #media in style tags of a VueJS component. Styling in the #media works all the time instead of working with the width rule.
<template>
<header class="header"></header>
</template>
<script>
export default {
}
</script>
<style scoped>
.header {
height: 2000px;
background-color: black;
}
#media only screen and (min-width: 576px) {
.header {
height: 2000px;
background-color: white;
}
}
</style>
However it works as expected in a raw .html file.
Problem solved. It is not related with vue.js or anything. It is because of a missing meta tag in index.html file.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
I am adding class="noPrint" for elements to hidden them
It is working fine in chrome but when I browse in Mozilla and IE, by default elements are not visible.
I need those elements to be hidden on print not by default.
Only with chrome it is working but in other browsers it is not
Here is my CSS Code :
<style type="text/css" media="print">
.noPrint{ display: none; }
.yesPrint{ display: block !important; }
</style>
You can use media queries to style things differently for print.
Something like this:
<style type="text/css">
#media print {
.noPrint{ display: none; }
.yesPrint{ display: block !important; }
}
</style>
I am trying to design a website that will responsively display either the desktop version or the mobile version depending on the user's device. I prefer to do this with responsive CSS as opposed to a mobile redirect.
The website in question is http://www.raceweekend.com. When the browser window is resized to a mobile width, the following is supposed to happen:
the horizontal menu should become vertical in red rectangle blocks
the rotating image should disappear
the logo should become centered at the top
the date (next to the logo) should disappear
The CSS behaves exactly how I want it to in both IE9 and Firefox. When I resize the window to be narrow enough, all of the above items happen.
On mobile, it just shows the regular browser version; none of the above items happen. I tested on an iPhone 4 and a Samsung Galaxy Nexus.
Here is my media query code:
#media handheld, screen and (max-width: 480px) {
#nav-bar {
display:none;
}
#header {
height:auto !important;
width:100% !important;
}
#nav {
height:auto !important;
}
.main-nav li {
float:none !important;
clear:both;
background-color:#cf171f;
margin-bottom:1px !important;
padding:0 !important;
}
.main-nav li a{
display:block;
padding:10px 18px;
}
.main-nav li a:hover{
background-color:#be161d;
color:#ffffff !important;
}
#date {
display:none;
}
#race-logo {
width: 100% !important;
}
.center {
margin: 0px auto;
display: block;
}
#content, #content-sliders {
margin-left:5% !important;
width: 90% !important;
padding-top:20px !important;
}
#footer {
font-size:14px !important;
line-height:1.5em;
}
}
Try using meta tags to force the mobile browser to report it's actual width:
<meta name="viewport" content="width=device-width" />
You could also disable zooming if you've got an appropriate responsive design:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
You need to add the viewport meta tag to your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
By default, an iPhone will in fact render sites as if its viewport were 980px wide, then scale them down to fit its actual width. This is because an iPhone's true viewport width is 480px (a literal 480px on an iPhone 3GS or earlier, or a "logical" 480px on a double-resolution iPhone 4 retina display), and so if it didn't do this, you'd only see a 480px-wide slice of every site you visited.
Confused yet? Go to, say, NYTimes.com on a desktop browser and resize the window to 480px wide. That's how the site would render on an iPhone if it didn't report its viewport width as 980px by default.
Anyway, that's why your media query doesn't work. So, adding the above meta tag will tell the iPhone to report its width as its actual width (480px), and that will then match the condition in your media query.