How to make content show/hide depending on device - html

I'm looking for a way to show/hide content for an email newsletter based on the device the customer is opening the email on.
I've currently got this snippet of code in the head section:
#media only screen and (max-width: 480px) {
#mobile { display: block; } /* show it on small screens */
#normal { display: none; } /* hide it elsewhere */
}
#media only screen and (min-width: 481px) {
#mobile { display: none; } /* hide it elsewhere */
#normal { display: block; } /* show it on large screens */
}
Along with:
<div id="mobile">content</div> or <div id="normal">content1<div>
This works fine if I was using it for web, I can scale my browser window and content appears/disappears based on the width of the window, but as soon as I send a test through our email system it works fine on mobile but breaks down on desktop (Gmail).
And because this is an email I can't utilise javascript so it all needs to be html/css.
Anything I'm doing wrong or missing?

I feel your pain. Showing and hiding content in html email newsletters was eluding me for ages!
/* Hide on Desktop */
.hide-desktop {
/* non-gmail */
display: none;
/* gmail */
font-size: 0;
max-height: 0;
line-height: 0;
/* outlook */
mso-hide: all;
/* optional, required only if you're using padding */
padding: 0;
}
#media (max-width: 480px) {
.hide-desktop {
display: block !important;
font-size: 12px !important;
max-height: none !important;
line-height: 1.5 !important;
}
}
/* Hide on Mobile */
#media (max-width: 480px) {
.hide-mobile {
display: none;
max-height: 0;
}
}
NOTE: Don't forget to inline the .hide-desktop rule, that is outside of the media query.
So using media queries and a number of hacks we can do a bullish hide all for desktop and then undo it media queries. Inversely, because mobile clients have decent support for media queries, we can hide the mobile content with media queries alone. The outlier, gmail, just gets the desktop view – which is unfortunate but still useable.

Related

(html) How do I hide my navbar when my website is viewed on mobile?

Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>

styles got messes up in printing

I am using an application to print the pages in potrait and landscape mode together.some pages are printing in potrait and some are in landscape.Printing the pages either in potrait or landscape looks good.But printing the pages in potrait and landscape together makes the pages with potrait to be congested.
This is the media query am using,
#media print {
html {
max-width: none;
width:100%;
float:left;
}
#nav-wrapper {
display: none;
}
div.pageBreak {
page-break-after: always !important;
}
#page{
size: auto;
margin: 0;
}
.landscape1 {
transform-origin: top left;
transform: translateY(1850px) rotate(-90deg);
overflow-x: hidden;
width: 1850px !important;
}
}
Media Queries offer matching against the device's orientation:
#media print and (orientation: landscape) {
/* landscape styles */
}
#media print and (orientation: portrait) {
/* portrait styles */
}
Work it in this way.
OR
Maybe you can try this custom css which someone tried online.
Here is a right CSS which work in the most browsers (Chrome, Firefox, IE9+).
First set body margin to 0, because otherwise page margins will be larger than those you set in the print dialog. Also set background color to visualize pages.
body {
margin: 0;
background: #CCCCCC;
}
margin, border and background are required to visualize pages.
padding must be set to the required print margin. In the print dialog you must set the same margins (10mm in this example).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
The size of A4 page is 210mm x 297mm. You need to subtract print margins from the size. And set the size of page's content:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
I use 276mm instead of 277mm, because different browsers scale pages a little bit differently. So some of them will print 277mm-height content on two pages. The second page will be empty. It's more safe to use 276mm.
We don't need any margin, border, padding, background on the printed page, so remove them:
#media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
Note that the origin of transformation is 0 0! Also the content of landscape pages must be moved 276mm down!
Also if you have a mix of portrait and lanscape pages IE will zoom out the pages. We fix it by setting -ms-zoom to 1.665. If you'll set it to 1.6666 or something like this the right border of the page content may be cropped sometimes.
If you need IE8- or other old browsers support you can use -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). But for modern enough browsers it's not required.
You are good to go!!

CSS target internet explorer & screen width

I am trying to add a custom style for only internet explorer but it needs to be different for different screen sizes.
To only target IE I'm using this.
#media screen\0, screen\9 {
.site-logo{
max-width: 150px;
}
}
To then add a browser width I've tried this but it doesn't work:
#media screen\0 and (min-width: 59.6875em){
.site-logo{
max-width: 300px;
}
}
This may be easy but I cannot figure it... thanks in advance
You can use the property IE hacks instead
#media screen and (max-width: 59.6875em) {
.site-logo {
color: red\9; /* IE6, IE7, IE8, IE9 */
/* or this */
color: red\0; /* IE8, IE9 */
/* or this */
color: red\9\0; /*Only works in IE9*/
/* every browsers */
color: red
}
}
<div class="site-logo">text</div>
Changed min to max for demo purposes

Using CSS to selectively display content, avoiding conflicts

I'm using CSS to selectively display content depending on viewport size. E.g.:
CSS:
.hires, .midres, .lowres {
display: none;
}
#media only screen and (min-width: 801px) { /* hires, desktop */
.hires {
display: inline;
}
}
#media only screen
and (min-width: 600px)
and (max-width: 800px) { /* mid res, tablet */
.midres {
display: inline;
}
}
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
.lowres {
display: inline;
}
}
HTML:
<p class="hires">Resolution: high.</p>
<p class="midres">Resolution: medium.</p>
<p class="lowres">Resolution: low.</p>
<p>This paragraph will always be displayed regardless of resolution.</p>
Which works, but only up to a point. When it comes to images, it turns out that I've neatly painted myself into a corner here. Because somewhere down the line there's something like:
CSS:
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
img {
float: none;
display: block;
width: 100%;
height: auto;
}
}
Which means that in the following case:
<img src="foo.jpg" class="hires" />
the image is always displayed regardless of viewport size, because the 'display: block;' overrides (conflicts with, really) the preceding rules to selectively display the image or not.
Unfortunately 'display' has no opposite of 'none'. I can't use 'visibility' because that will still leave a gap where the hidden content used to be. I could use jQuery to show() and hide() content, but I'd rather not move part of my styling from the style sheets (where it belongs) to Javascript (where, strictly speaking, it doesn't).
Unfortunately I noticed this little snafu only now, quite a way into the project. Which means I'm an idiot. :-)
What would be the best way to deal with the above issue?
You could either wrap images in something with the class lores or use img.lowres as selector in your css, ie
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
img.lowres {
float: none;
display: block;
width: 100%;
height: auto;
}
}

Colour transition effect on browser

I am trying to achieve a basic task where you hover over a link and it transition into a colour and visa-versa. The problem I am having is that whenever I change the size of the browser, the text affected responds a lot slower. I added a media query where it changes the percentage of the font depending on the browser size so I am assuming this has something to do with it. I created a jsfiddle to show you the problem. Thanks
http://jsfiddle.net/mexicanbandit/vbc25Ly2/
html {
font-size: 100%;
}
/* Medium screens ($mediumscreens) */
#media (min-width: 40rem) {
/* line 26, ../sass/screen.scss */
html {
font-size: 112%;
}
}
/* Large screens ($largescreens) */
#media (min-width: 64rem) {
/* line 33, ../sass/screen.scss */
html {
font-size: 120%;
}
}