I have a css file that looks like this:
#foo{
width: 35%;
height: 380px;
}
#media only screen and (max-device-width: 480px) {
#foo{
width: 100%;
height: 100%;
}
}
When I run the html from a mobile browser it's not displaying in full screen, any idea what needs to be modified? Ive tried Safari and Chrome and neither seem to apply the changes on the mobile device.
Make sure the meta viewport tag is set with width=device-width:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
The only thing i can think of is that the device you're testing on actually has a screen larger then 480px.
Testing your code in a browser by making it smaller on my laptop without "device-" works.
#foo{
width: 35%;
height: 380px;
}
#media only screen and (max-width: 480px) {
#foo{
width: 100%;
height: 100%;
}
}
Related
I can't seem to be able to change the width or height on my website, what am I doing wrong here? Here's my website if it's easier to check ut out: http://sstromberg.saldev.nl/gmaps.html
Ignore the menu, still working on that.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.locatie {
position: relative;
padding-bottom: 56.25%;
text-align: center;
}
.locatie iframe {
width: 75%;
height: 50%;
margin: 0 auto;
display: block;
border: 0;
}
}
<div class="locatie">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2434.6620047353485!2d6.265314715523063!3d52.3946772797907!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c7e676b805f373%3A0x82055a9731e6d8ba!2sLandstede!5e0!3m2!1snl!2snl!4v1513254153672" style="border:0" allowfullscreen></iframe>
</div>
Device-width refers to the display's resolution (eg. the 1024 from 1024x768), while width refers to the width of the browser itself (which will be different from the resolution if the browser isn't maximized). If your resolution is large enough to get you in one break point, but the width of the browser is small enough to get you in another one, you'll end up with an odd combination of both.
Unless you have a legitimate reason to restrict the style sheets based on the resolution and not the size of the viewport, then just use min-width/max-width and avoid min-device-width/max-device-width.
#media only screen and (min-width : 320px) and (max-width : 480px) {
.locatie {
position: relative;
padding-bottom: 56.25%;
text-align: center;
}
.locatie iframe {
width: 100%;
height: 50%;
margin: 0 auto;
display: block;
border: 0;
}
}
https://plnkr.co/edit/XZYSgaXQGGj9AehhZ0tH?p=preview
you can use
#media(min-width:0px) and (max-width:768) {
.locatie iframe {
width: 100%;
height: according to your;
}
}
In mobile you can use 100% it's batter to responsive not PX
I'm experiencing some problems with my two stylesheets.
I've been trying to make my website mobile friendly so I created a separate CSS file for mobile. Like so:
<link rel="stylesheet" type="text/css" media = "screen" href="css/services.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type= "text/css" href="css/mobile/services.css"
media ="only screen and (max-width: 500px)" />
Except I've run into a problem with overiding the main CSS file with the mobile one for a specific problem (only one part is not overriding; everything else is fine).
In "css/services.css" (the main one) I have:
#pricing{
margin: 0px;
}
.pricing_tables{
width: 600px;
margin-bottom: 100px;
}
And in "css/mobile/services.css" (the mobile version) I have:
#pricing{
width: 270px;
}
.pricing_tables{
margin: 0 auto;
width: 270px;
margin-bottom: 30px;
}
Basically, I can't change it to have a smaller width. But I haven't run into any problems until now.
The element I'm trying to change is a table. #pricing is the also set at width:270px
Thanks In Advance!
Is there any reason why you wouldn't simplify your life and combine your two stylesheets into one?
See if this helps you:
http://codepen.io/panchroma/pen/BpNMvz
CSS
#pricing{
margin: 0px;
}
.pricing_tables{
width: 600px;
margin-bottom: 100px;
}
#media screen and (max-width: 500px) {
#pricing{
width: 270px;
}
.pricing_tables{
margin: 0 auto;
width: 270px;
margin-bottom: 30px;
}
}
I have two logos: one for small screens and one for large ones.
Rather than different resolutions of the same image, these are two very different .png files and thus I can not use a scaling function. In my attempt to use them, I created the following media queries in a .jsp page with the purpose of editing a div box in order to show the files as background-images:
<style>
<meta name="viewport" content="width=device-width, initial-scale=1">
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
height: 76px;
float: right;
}
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
height: 76px;
float: right;
}
}
</style>
However, this only gives me the smaller logo when the width of the window is below 1199px.
If I expand the window to 1200px or above I receive nothing.
Both images are valid because swapping their position allows me to call either one, but never both.
Can any of you tell me what is wrong with my code?
When using mobile first approach (min-width) the smaller values come first, so your code would be:
.zachery_div {
height: 76px;
float: right;
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
}
}
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
Note that meta tag shouldn't be inside style tag. but inside head before style
And since you had repeated properties, I put them outside of #media as they are "standard" across the code
This media query seems to work when I resize the viewport window on my browser, but when I launch the site on a smartphone it looks zoomed in. Once I zoom out it looks okay, but when it loads it looks zoomed in...so I can only assume that something isn't breaking correctly.
Here's what I have in my meta tag:
<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0">
And here is the first media query that I have in my CSS: The default body size of the document (when being viewed on a web browser on a computer) is 1200px.
#media screen and (min-width:481px) and (max-width:800px){
body {
width:800px;
}
.container {
width: 100%;
margin: auto;
background-image:url("img/background.jpg");
}
Any ideas as to why this may not be working?
EDIT:
I also have media queries for smaller viewport sizes that I'm adding to my original post. So it should launch on a smartphone, right?
#media only screen and (min-width:375px) and (max-width:667){
body {
width:480px;
margin: 0 auto;
}
.container {
width: 100%;
margin: auto;
background-image:url("img/background.jpg");
}
#logo {
color: white;
margin: 0 auto;
padding:0px;
text-transform:uppercase;
letter-spacing: 6px;
padding-top:110px;
font-size: 13px;
}
Try using:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
instead of your tag.
https://alwaystwisted.com/articles/2013-01-10-dont-do-this-in-responsive-web-development
I am trying to make a certain page on our website mobile-friendly by hiding two large divs that aren't supposed to display as they are a) interactive and feature hover effects, and b) break up the flow of the page.
Currently testing on my LG G2 in Chrome, using
#media only screen and (max-width : 768px) {
div.example {
display: none !important;
visibility: hidden;
}
}
However it has no effect at all.
The CSS for "example" is:
div.example {
background-image: url('http://www.example.com/example.jpg'); border: 3px solid #ecf0f1;
height: 941px;
width: 1209px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
What am I doing wrong? As you can see by the dimensions they are too big for a standard mobile device... the page looks perfect on iPad & desktop resolutions, and even the forced requested desktop site version displays fine in mobile.
Any help appreciated, cheers.
Resolution of LG G2 is 1080 x 1920, which is larger than max-width: 768px. Your media query failed. Use:
#media only screen and (max-width : 1080px) {
}
for portrait orientation of the device. Even better, you can make use of: -webkit-device-pixel-ratio to target devices with different pixel ratio.
FYI, LG G2 has webkit-device-pixel-ratio: 3 (see Reference)
Update: Here is a general media query for high pixel ratio devices:
https://gist.github.com/marcedwards/3446599
<!doctype html>
<html>
<head>
<style>
#media only screen and (max-width : 768px) { div.example { display: none; } }
div.example {
background-image: url('http://scholarship-positions.com/internships/wp-content/uploads/2014/12/google.jpg');
background-repeat: no-repeat;
border: 3px solid #ecf0f1;
height: 941px;
width: 1209px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>