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.
Related
I have to superimpose a form over an image, and it's not a problem, since with some CSS instruction it is simple. The problem is that I must do it responsively, in a way that with every monitor and resolution the positioning doesn't change and adapt itself.
This is an example: http://www.gruppofas.eu/siti-web/
Positioning the form in the green-bordered box it isn't a problem, but doing it in a way that, when viewing it in different resolutions or devices, it remains inside it, how can it be done?
Thanks
You should use media queries in your CSS file.
Go to your CSS and add this:
#media (max-width: 600px) { - here you add the px**** and it will resize
.YourImage/BoxClassGoesHere* {
display: none;
}
}
You can also check in google for media queries.
I hope that helped you.
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.
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.
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?
I have a webpage with the following layout: http://jsfiddle.net/h9Nn3/6/ and it looks exactly like I want it to as long as the user's browser is wide enough (over 700px or so) but if it is thinner than that it starts to get all jumbled up and if the browser is only half the screen which somewhat normal then it looks terrible. What would the best way to fix this be?
I think the best thing would be if the items simply moved down as opposed to overlapping.
You can use min-width, as #anjunatl pointed out, or you can use CSS3 media queries.
They let you tweak the CSS for any resolution range you want:
body {
color: red;
}
#media screen and (max-width: 700px) {
body {
color: blue;
}
}
When the user's browser is less than 700px wide, the new CSS is put into effect and overrides the old CSS. You can use this to your advantage and basically fix any bugs you find with the website by adding new rules into the media query block. That way, they only show up and fix the layout at the right resolution.
Add this CSS to the body tag: min-width: 700px;