I am working with this page http://lifecrypter.io/ and I am using CSS to hide and show elements according to device screen resolution.
Code here:
#media only screen and (max-width: 2000px) {
.one{display:block !important; }
.two{display:none !important;}
.three{display:none !important;}
}
#media only screen and (max-width: 920px) {
.one{display:none !important;}
.two{display:block !important;}
.three{display:none !important;}
}
#media only screen and (max-width: 479px) {
.one{display:none !important;}
.two{display:none !important;}
.three{display:block !important;}
}
I tested de site with Responsinator and aparently it was working fine but then I tested de site with a cellphone and:
The hide and show element properties were not working. I tested with several phones and the result were the same.
Doing several test I found this:
[http://lifecrypter.io/] close the website inside a frameset tag
Testing on mobile device the original site link in S3
Now I can see the hide and show properties are working fine.
I tried to modify the meta tags of the page but
The meta tags show before are the only ones I can modify
There is any way to fix this?
Try adding a viewport meta tag.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Possible duplicate on this question. #media query not working in mobile. Works fine in Chrome
. Hope it Helps!
Related
So here is my question on Mozilla support:
So I am testing my website in the Responsive Design-modus and there is no problem with the the CSS. But when I am at my phone the site shows me the CSS of desktop. He zooms in because of the viewport (I think). I do not know if this is the problem.
What I tried with the CSS:
#media screen and (min-width: {PixelNumber}px) { /* CSS stuf */ }
/*or*/
#media only screen and (min-width: {PixelNumber}px) { /* CSS stuf */ }
This is my html meta tag:
<meta name="viewport" property="viewport" content="width-device-width, initial-scale=0.9">
Click here to view my site
On chrome:
And on firefox
width-device-width in your viewport tag should be width=device-width
I am designing a newsletter that currently looks fine in all email clients except Yahoo. I have tried inline styling and CSS in the style tag and in both concurrently. Nothing I do forces yahoo to respect my font/text styling. Everything defaults to cambria and serif instead of the arial, sansserif I want to display. Does anyone know of a workaround? Thank you.
Post some code so we can help you find a solution.
No clue if this is your issue but I'll post it anyway. Yahoo! Mail will render media queries intended for mobile only. If this is your problem, here is your solution:
Replace
<style>
#media only screen and (max-device-width: 480px) {
#mobileWrapper {width:100% !important}
.headerText {font-size:24px !important}
}
</style>
With
<style>
#media only screen and (max-device-width: 480px) {
*[id=mobileWrapper] {width:100% !important}
*[class=headerText] {font-size:24px !important}
}
</style>
Notice the use of [id or class here] rather than your traditional .class or #id. This will force Yahoo! Mail to render your CSS correctly. Hope that makes sense.
add !important; to the end of your font declaration.
I have a website that I need to have working on mobile devices currently it displays like the image below.
So far I have had the following ideas:
Copy the 680 lines of CSS again within the same document in between #media only screen tags.
Copy the same code into a mobile.css stylesheet and start again
"2" is my least favourite option but the most likely I am just wanting to know what your options would be?
iPhone View:
Put this in the head of your HTML
<meta name='viewport' content='width=device-width, initial-scale=1 />
It's going to take a little work but is worth it. You have to take the CSS that is too big on mobile and put them in specific media queries based on size. Let's say you want your titles to change from 80px to 40px when the screen size is less than 600px:
#media screen and (max-width: 1000px) {
.mytitle {
font-size: 80px;
}
}
#media screen and (max-width: 600px) {
.mytitle {
font-size: 40px;
}
}
Here is my css, as a test:
*{margin:0;padding:0;outline:0;border:0;}
body{background:#686465;font-family:Arial,Verdana,sans-serif;font-size:100%;}
#media screen and (max-device-width:320px){
body{background:red !important;}
}
#media screen and (max-device-width:800px){
body{background:organge !important;}
}
I have 2 android devices running using the SDK to test this. One is 3.2 inch HVGA Slider 320x480, and the first rule picks up on this device and sets the body background to red. The second device is Nexus 7 800x1280, but this one ignores both of the media rules; however if i delete the first media rule then it picks it up. Why??
Have you put this link in your html file:-
<meta name="viewport" content="width=device-width, initial-scale=1.0;">
you can use-
#media only screen and (max-width:800px){ }
instead of-
#media screen and (max-device-width:800px){ }
Replace into this
*{margin:0;padding:0;outline:0;border:0;}
body{background:#686465;font-family:Arial,Verdana,sans-serif;font-size:100%;}
#media screen and (max-device-width:320px){
body{background:red !important;}
}
#media screen and (max-device-width:800px){
body{background:organge !important;}
}
this
*{margin:0;padding:0;outline:0;border:0;}
body{background:#fcfcfc;font-family:Arial,Verdana,sans-serif;font-size:100%;}
#media screen and (max-device-width:800px){
body{background:orange;}
}
#media screen and (max-device-width:320px){
body{background:red ;}
}
More about media query-1
Media query-2
hi i'm creating an enewsletter and am trying to resize it for when its viewd on a mobile i have it working on iphone but android i'm unsure as to how to resize because of the massive screen variants. heres what ive got so far.
so in my i have too added things that overide the style if the screen width is a certain size.
#media only screen and (max-device-width: 320px) {
.hide { display: none !important; }
#main_content, #inner_content, .mobwidth { width: 300px !important; }
#content_rows, .mobwidthtext {width:300px !important;}
.banner {height:94px !important;}
.top {height:67px !important;}
.footer {height:109px !important;}
}
#media only screen and (max-device-width: 400px) {
.hide { display: none !important; }
#main_content, #inner_content, .mobwidth { width: 400px !important; }
#content_rows, .mobwidthtext {width:380px !important;}
.banner {height:117px !important;}
.top {height:83px !important;}
.footer {height:136px !important;}
}
Most email clients ignore CSS declarations that are not inline. Embedded stylesheets are ignored as well. Media queries will not work because they would override those made by web-based email clients, such as Gmail (i.e. what you want to do will not work).
Email HTML standards are pretty brain-dead. Keep in mind that things like MS Outlook don't even use browser technology to view emails - they use the MS Word engine.
Here's a good guide as to what CSS features can be used in emails:
http://www.campaignmonitor.com/css/
I disagree with the above answer. Using media queries for mobile will most definitely work but for android set your max screen size to 480. make sure to keep !important on all styles set by the query and ensure you have a general layout in your inline styles. this will result in browser stripping the css in head and just using the inline. Then the mobiles (majority of which do not strip head) using your media queries, I would recommend a large amount of testing before a send. But the only issue you have atm is just finding the correct maxwidths as you have to take into account the portrait and landscape widths as well. While also considering that zoom can also set off meia Queries with some devices