I'm sending out an email in which there is a clever visual element that relies on being able to highlight text. As this is not really possible on mobile and it looks really awkward without that visual effect, I was thinking of trying to just not show this element on mobile.
As far as I know however, the only way to do this is with an #media tag, which to the best of my knowledge can't be done in the in-line email-friendly css way. Is this possible in some other way?
I'm using MailChimp if that's relevant, but I'm not sure that it would be.
Media queries will definitely work inline through MailChimp. Basically you just assign a class to the element you want to hide, like "desktop-only," and then apply a CSS rule to that selector to display:none when the browser width is below a certain pixel width.
#media only screen and (max-device-width: 480px) {
.desktop-only {
display:none;
}
}
https://blog.mailchimp.com/using-media-queries-to-improve-readability/
Media queries have partial support in major email clients. There is no 100% technique to target all mobile devices across all clients.
Instead of using a max-width media query to hide it on mobile, you could use a min-width media query to show it on non-mobile platforms if you prefer. That way it will default to hidden in clients that do not support media queries.
Also, there is a difference between min-width and min-device-width when calling them. Most responsive email templates use max-width.
Related
Do you still need media queries to make website responsive when you have already used flex box? Are there any instances where media queries give us better control?
Yes there are a lot of things where you would still use media-queries.
You would probably want to switch from flex-basis: 200px; to a more flexible flex-basis: 50%; width on mobiles.
A combination of both is probably best.
If you are working with percentages and wan't a different column count on smaller devices there is imho no way around media queries.
Flex-box and Grid Layout, along with Multi-column layout are responsive by default. These specifications were written in a world where responsive design and supporting multiple devices was already a thing. This means that they include a lot of common sense functionality, which enables responsive design without us needing to do much.
If we want to change the size or proportions of some columns, we have to add a break-point using a Media Query and redefine them. We have no other options when working in percentages, as they will always be the same percentage of the container they are in, whether that container is wide or narrow.
FlexBox is one thing.
Responsive Web Desing (RWD) is something different.
FlexBox is a native CSS set of properties allowing you to apply some specific layout-related styles to your parent and child elements.
RWD is an approach of adjusting the site to fit every screen size. In order to achieve this, you use #MediaQueries.
Flexbox is not a replacement for mediaQueries. Magic happens when you use them together.
Imagine a situation where you want to replace an img scr in the "background" css property when user's screen size goes below 768px. How would You do that with Flexbox but without #Media rules ?
MediaQueries are really powerful and give you a lot of possibilities to control different layouts on your site based on the screen width.
I am developing a page using CSS3 media queries using the mobile first approach, meaning I start small and work my way up.
But now I am encountering a problem: How to deal with 'style bleeding' for visibility classes?
Let me explain what I mean – when my first media query looks like this:
#media only screen and (min-width: 20em) {
// Styles here
}
These styles don't get applied to screens smaller than 20em. This actually is no problem because the styles that are not wrapped up in a media query are basically the first media query (I hope you get what I mean).
But now I want to introduce visibility classes to hide elements for certain screen sizes. The problem is, that these styles basically get inherited. See:
#media only screen and (min-width: 20em) {
.hidden-first {
display: none;
}
}
Any element with the class hidden-first gets hidden as soon as the screen is 20em wide or wider. But I only want to hide the element as long as the media query is active.
How do I do that – is there a way around resetting the style inside another media query?
I suggest you create a class like hide-for-mediumand create rule for it display:none !important;
Take a look at the Foundation framework and see how the do it. I guess it's the best way to deal with this situation.
To make this short and simple, I have a <div> in which I wish to be hidden if the user's resolution is 1024x768.
So if I have a separate CSS file for the css left_bar, then the template with <div id='left_bar'> how would I go about having the resolution check query?
#media all and (width:1024px) and (height:768px) {
/* CSS rules here */
}
Although, that's awfully specific. Usually you use media queries with min-width or similar.
I've been working with a page which has two layouts dependent upon the width of the device being used to view the page:
/*Above is Mobile*/
#media screen and (min-device-width: 600px){
/*Below is Web*/
}
This approach essentially takes the various "web" and "mobile" divs throughout the page and displays, hides, or alters them as required for either layout; however, while the "web" divs are hidden, they are still loaded by the mobile device, potentially slowing down the page load.
My first thought was that if I could define only the "mobile" divs and not the "web" divs, then I could avoid loading all of these additional elements. Thus, does a method similar to the CSS media query exist for HTML? Or alternatively, is is there a way to define two different HTML layouts based on the width of the device the page is displayed on?
EDIT: A better approach, at least as far as images and graphics are concerned, is likely to use CSS to define the image rather than the HTML. Thus, instead of doing:
<div id="img"><img src="URL"></div>
...and trying to hide the div, you would instead take this approach:
<div id="img"></div>
and...
div#img {
background: none;
}
/*Above is Mobile*/
#media screen and (min-device-width: 600px){
/*Below is Web*/
div#img {
background: url(URL);
height: 400px;
width: 600px;
}
}
Thus, the mobile version doesn't load the images and we're still only using CSS.
Or alternatively, is is there a way to define two different HTML
layouts based on the width of the device the page is displayed on?
Thats the route to take imho. HTML doesn't have a similar mechanism to define different rulesets for viewports.
I think there are some js options. Does this conversation help?
What is the best way to detect a mobile device in jQuery?
How can I make the header area not overlap at http://androdevlab.com when viewed in a mobile browser?
You should use media queries. You can read more about media queries here:
http://www.w3.org/TR/css3-mediaqueries/
http://reference.sitepoint.com/css/mediaqueries
http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
You can also use plugins like FitText.js - http://fittextjs.com/
Looking at the code for your site in Firebug, the main issue is that the line-height of the line 'A portable lab in NYC of Android devices delivered to your door' is too big. It's currently at '1.8' without a value. Try setting it to a smaller value of maybe 1em or 1.25em. Likewise for the nav-primary li a class.
Also, the width of the nav element is defined as 980px so on any device, this would be a fixed value. Maybe you can try setting a % or em based value.
If you need to change many elements for the mobile version while keeping the #screen CSS the same, you should use media queries. Makes things much easier to handle.
you should use various responsive design tricks. like setting the: meta viewport tag, #media queries adjusted css. specifing the margin and sizes in the header with % or em instead of px of other set sizes etc. you could use js libraries like syze and projects like html5boilerplate to help you with this.