I want my page look nice with iphone4 and iphone 5. I wrote some media queries, but it seems they are ignored:
#media only screen and (max-device-width: 480px) {
#gpsMain{
position:absolute;
top:25px;
left:20%;
}
}
#media only screen and (max-device-width: 320px) {
#gpsMain{
position:absolute;
top:11px;
left:20%;
}
}
Why the styles are not applied? Is this the correct way to get resolutions of the two iphone?
(The queries are the last thing I wrote on css document)
Double check to see if you have a viewport set. Not sure if it matters but I always see media queries formatted like so:
#-ms-viewport {
width: device-width;
}
#viewport {
width: device-width;
}
#media screen and (max-width: 400px) {
.list-view .site-content .post-thumbnail { background: none; width: auto; z-index: 2; }
}
This is from the 2014 wordpress theme. http://www.responsinator.com/ is a good place to double check how things are looking.
Try change into this:
#media screen and (max-device-width: 480px) {
#gpsMain{
position:absolute;
top:25px;
left:20%;
}
}
#media screen and (max-device-width: 320px) {
#gpsMain{
position:absolute;
top:11px;
left:20%;
}
}
Related
I want to achieve if the screen is pc user width:880px; if it is mobile use width: inherit;, how do i get this using the #media query.
#media all and (width: 880px) {
.colm_6_container {
width: inherit;
}
}
My div class is 'colm_6_container'.
//ipad and desktop
#media screen and (min-width: 768px) {
.colm_6_container{
width: 880px;
}
}
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}
So I am trying to make my website responsive, but when I target screens larger than 1600px the css is not working. Do I have any typo in my css code? Thank you.
#media (max-width:900px) and (min-width:600px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
#media (max-width:1250px) and (min-width:900px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
/* THIS ONE IS NOT WORKING */
#media only screen and (min-width: 1600px) and (max-width: 2600px) {
ul.news li {
width: 100%!important;
color: red!important;
}
}
You can refer to this Media Query and write your css in this media query dimensions
/*=====Media Query Css Start======*/
#media all and (max-width:1920px){
}
#media all and (max-width:1600px){
}
#media all and (max-width:1366px){
}
#media all and (max-width:1280px){
}
#media all and (max-width:1024px){
}
#media all and (max-width:960px){
}
#media screen and (max-width:767px){
}
#media screen and (max-width:480px){
}
/*=====Media Query Css End======*/
I have set some media queries, but some work and some dont. I really dont know what is wrong, because i used the same media query code for another project and that worked as usual. It works from 768px and on but not on smaller screens. I am using bootstrap and angular.
#media only screen and (min-width : 320px) and (max-width : 480px) {
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 481px){
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 768px) {
.accordion-ticket {
margin-left: 10px;
}
}
Am I missing something? Meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Offhand I'd say you were missing a max-width statement from the middle media query but it's not entirely clear what the issue is.
JSfiddle Demo
.accordion-ticket {
height: 25px;
background: red;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.accordion-ticket {
background: blue;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.accordion-ticket {
background: green;
}
}
#media (min-width: 768px) {
.accordion-ticket {
background: orange;
}
}
<div class="accordion-ticket"></div>
Looks like your queries are upside down for a start you should have them from the widest to shortest top to bottom.
this is my code for my buttons that i have on my page, with my desktop the buttons turn out pretty much where i want them to, but when i get on a laptop the buttons move down the page further and further depending on the computer resolution..
my background image is set up to fit the screen no matter what size they have there resolution at or how they resize there browser to keep it from distorting the picture but i just can't seem to get the buttons to show in the same spot for all resolutions.. or if there was a way to get the buttons to move with the background image for its position that's pretty much what im looking for and i have tried % also but here is the code below
a.button {
position:absolute;
display:block;
}
a.button.testing-link {
width:250px;
height:87px;
background:url(http:);
top:753px;
left:750px;
}
a.button.testing2-link {
width:250px;
height:87px;
background:url(http:);
top:753px;
left:180px;
}
a.button.testing3-link {
width:250px;
height:89px;
background:url(http:);
top:753px;
left:465px;
}
This is because you need to make your css responsive. Here's a cheat sheet.
http://webdesignerwall.com/tutorials/css3-media-queries
But basically you would have something like this:
#media screen and (max-width: 600px) {
a.button {
//your rules for that
}
}
#media screen (min-width: 600px) and (max-width: 800px) {
a.button {
//your rules for that
}
}
and so on.
Answer in english: Your desktop's resolution is not the same as the laptop you viewed, therefore those rules you set for it are still applied on the laptop, it looks different because of the resolution.
Also, a mistake I ran into as a novice web developer was positioning how you are, I would suggest not positioning that way, look up on google examples of good positioning methods, perhaps using percents instead of static values in pixels.
this is what i have came up with .. let me know what you think ?
a.button {
position:absolute;
display:block;
margin-left:auto;
margin-right:auto;
}
#media screen and (min-width: 1500px) and (max-width: 2500px) {
a.button.testing-link {
width:250px;
height:87px;
background:url();
top:753px;
left:750px;
}
}
#media screen and (min-width: 600px) and (max-width: 1499px) {
a.button.testing-link {
width:250px;
height:87px;
background:url();
top:0px;
left:0px;
}
}
#media screen and (min-width: 1500px) and (max-width: 2500px) {
a.button.testing2-link {
width:250px;
height:87px;
background:url();
top:753px;
left:50px;
}
}
#media screen and (min-width: 600px) and (max-width: 1499px) {
a.button.testing2-link {
width:250px;
height:87px;
background:url();
top:0px;
left:0px;
}
}
#media screen and (min-width: 1500px) and (max-width: 2500px) {
a.button.testing3-link {
width:250px;
height:87px;
background:url();
top:753px;
left:340px;
}
}
#media screen and (min-width: 600px) and (max-width: 1499px) {
a.button.testing3-link {
width:250px;
height:87px;
background:url();
top:0px;
left:0px;
}
}