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
Related
I was using media query and it was working, but now it just stopped working, but if I use the developer tool of the browser the media query works well
Here is my media query code, but I dont think that that is the error
#media only screen and (max-width: 760px) and (max-device-width: 760px) {
.conainerInp {
display: block !important;
}
.contInputs,
.contInputs3 {
flex: 100% !important;
max-width: 100% !important;
margin-bottom: 10px;
width: 100%;
}
.last {
margin-bottom: 60px;
}
.contenido {
display: flex !important;
flex-wrap: wrap !important;
}
.contenedoresGen {
max-width: 100% !important;
width: 100% !important;
}
::ng-deep .mat-horizontal-content-container {
padding: 0 !important;
}
::ng-deep.mat-horizontal-stepper-content {
overflow: auto !important;
}
::ng-deep .mat-tab-label-container {
overflow-x: auto !important;
}
}
the screen was at a measure less thant the indicated in the media query
You need to add the following meta to your HTML in the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I foun out the problem, it was my conditions, it neaded that the sceen be at 760px also the devie at the same time, I already had the meta tag before asking this, the solution was removing
and (max-device-width: 760px)
and it still working on movile because of the meta tag
I looked on every thread and I tried every possible solution to no avail. It just doesn't work on any browser...
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="bg">
</div>
</body>
CSS:
#media only screen and (max-width: 1200){
.bg{
background-color: green;
}
}
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg{
background-color: black;
height: 100vh;
}
Any suggestions?
You have 2 problems that are preventing it from working:
You need to specify the unit (e.g. px) in the (max-width: 1200px) - otherwise it doesn't recognise the breakpoint
You need to include the media query after the default css for .bg. Because you are including the media query before .bg{background-color: black;...}, this is overriding the CSS rule in the media query that set is to green.
See this in a working snippet (Click "Expand Snippet" to see it in fullscreen with a black background):
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg {
background-color: black;
height: 100vh;
}
#media only screen and (max-width: 1200px) {
.bg {
background-color: green;
}
}
<div class="bg">
</div>
You should be using min-width in your media queries and apply them using mobile first approach. It means first you apply default styles which will apply to any screen if there are no media queries. Then you reset styles for larger screen sizes. The default styles then only apply to smaller screens.
Example:
/* Default style */
.sample-class {
color: #ff0000;
}
/* Reset style for screen sizes that are 768px or higher */
#media screen and (min-width: 768px) {
.sample-class {
color: #777777;
}
}
Do make sure that you are implementing styles in the order above.
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
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%;
}
}