I am trying to write a media query to make the site look proper in the iPad.
I've got all device css files as mobile.css. And under mobile.css here's how I am making some changes.
Below is the CSS code snippet.
#media screen and (max-width: 1024px) {
.tobeaddedtobutton {
background-color: transparent;
width: 100%;
height: 35px;
border-radius: 0px;
background-image: url("../assets/tablet/btn-border-yellow.png");
background-repeat: no-repeat;
text-align: left;
font-family: Signika;
color: white;
border: none;
font-size: 13px;
}
.tobeaddedtobutton-1 {
background-color: transparent;
width: 100%;
height: 35px;
border-radius: 0px;
background-image: url("../assets/tablet/btn-border-orange.png");
background-repeat: no-repeat;
text-align: left;
font-family: Signika;
color: white;
border: none;
font-size: 13px;
}
}
Simply I am trying to add a different border image to the buttons when the device is iPad. But when I am changing the path under this media query, broweser is reading this code for all the devices, which is not correct.
Am I doing it right?
Please suggest.
These are my media queries I use. I use Google Chrome Tools to switch between mobile device screen sizes.
I have noticed that even though things may look right in Google Chrome's tools that a lot of times I have to hack a media query to make things work properly on the actual device. Unfortunately you never know till you can test on an actual device.
In order to give you a lot of different examples of working media queries I left my styles in them from a site I previously worked on.
Let me know if you need me to clarify anything!
/* Iphone 4 */
#media screen
and (min-device-width: 320px)
and (max-device-width: 480px)
{
.newsletterDownload a {
padding-left: 25px;
}
}
/* Iphone 5 */
#media screen
and (min-device-width: 320px)
and (max-device-width: 568px)
{
.newsletterDownload a {
padding-left: 25px;
}
}
/* Iphone 6 */
#media screen
and (min-device-width: 375px)
and (max-device-width: 667px) {
.newsletterDownload a {
padding-left: 50px;
}
}
/* Iphone 6 plus */
#media screen
and (min-device-width: 414px)
and (max-device-width: 736px)
{
.newsletterDownload a {
padding-left: 80px;
}
}
/* I Pad Portrait */
#media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
{
.newsletterDownload a {
padding-left: 20px;
}
.hours {
padding-left: 0px;
}
}
/* I Pad Landscape */
#media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
{
.newsletterDownload a {
padding-left: 80px;
}
}
/* Blackberry Play Book*/
#media screen
and (min-device-width : 600px)
and (max-device-width : 1024px)
and (orientation : landscape)
{
.newsletterDownload a {
padding-left: 50px;
}
.hours {
padding-left: 16px;
}
}
/* Blackberry Z30 */
#media screen
and (min-device-width: 360px)
and (max-device-width: 640px)
{
.newsletterDownload a {
padding-left: 47px;
}
}
/* Nexus 6 */
#media screen
and (min-device-width: 412px)
and (max-device-width: 732px)
{
.newsletterDownload a {
padding-left: 78px;
}
}
/* Nexus 7 */
#media screen
and (min-device-width: 600px)
and (max-device-width: 960px)
and (orientation : portrait)
{
.newsletterDownload a {
padding-left: 37px;
font-size: 1em;
}
}
/* Nexus 7 */
#media screen
and (min-device-width: 600px)
and (max-device-width: 960px)
and (orientation : landscape)
{
.newsletterDownload a {
padding-left:85px;
font-size: 1em;
}
}
And here is iphone with a background image. Remember you will have to make sure to get all Iphone queries for each size screen and landscape vs portrait views.
/* Iphone 6 plus */
#media screen
and (min-device-width: 414px)
and (max-device-width: 736px)
{
.MyClass {
background-image: url('filePathTo/image.png') repeat-x;
}
}
i think there was a specific media query for screen pixel-ratio (dpi) so you could detect retina devices (e.g. iPhones/Tablets) where you could add a simple min-width and there you go... Tablet-Query.
Example:
#media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
#media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
#media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
Related
Hey guys I wrote 6 different responsive for my page but it just read one of my styles for all of them and other 5 styles don't work at all.
I'd be glad if you could help me
Try this:
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px) {
.header { width: 90%; }
}
#media only screen and (min-width: 768px) and (max-width: 769px) and (min-height: 1024px) and (max-height: 1025px) {
.header { width: 100%; }
}
I have this issue where my media queries are messing up on my iPhone and iPad, my tablet media query is targeted on my iPhone so the layout on mobile is all wrong.
I have already checked my ordering of the media queries, and they are from smallest to biggest since as I styled the page starting from mobile view first.
.career-feature-icon {
width: 100%;
height: 300px;
padding: 10px;
#media screen and (min-width: 37.5rem) {
float: left;
width: 50%;
}
#media (min-width: 64rem) {
width: 25%;
}
img {
width: 200px;
height: 200px;
display: block;
margin: 0 auto;
}
h2 {
text-align: center;
#media (min-width: 64rem) {
padding-top: 20px;
}
}
}
My styling is there, but it is overruled by whatever is in the 37.5rem media query.
Again this is ONLY on iOS devices, any help is greatly appreciated!
SOLVED: I changed my media query from REM to px 37.5rem -> 600px 64rem -> 1024px and it rendered the way it should
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px (48rem to 64rem)
*/
#media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px (30.065rem to 47.93rem)
*/
#media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 480px (20rem to 30rem)
*/
#media (min-width: 320px) and (max-width: 480px) {
//CSS
}
Try this might work
Media queries for CSS class
am using .CSSTableGenerator as a css class for table. how to use Media queries for this CSS class file only?
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
//width: 495px;
}
}
#media only screen and (max-width:992px){
}
#media only screen and (max-width: 400px){
}
Use Like this keep Grater size first than lower
I recently started learning responsive design for mobiles etc and i am using troy.labs.daum.net to test on, it started out working fine on my first two media queries although when I choose from the resolution list now it only shows the 400px width query
heres my css
#media only screen and max-width 320px {
#searcher
{
width:190px;
height:30px;
float:left;
}
#searcherin
{
width:185px;
height:16px;
margin-top:6px;
border:1px solid #ccc;
padding-left:4px;
text-transform:capitalize;
}
}
#media only screen and max-width 360px {
#searcher
{
width:230px;
height:30px;
float:left;
}
#searcherin
{
width:225px;
height:16px;
margin-top:6px;
border:1px solid #ccc;
padding-left:4px;
text-transform:capitalize;
}
}
#media only screen and max-width 400px {
#searcher
{
width:268px;
height:30px;
float:left;
}
#searcherin
{
width:264px;
height:16px;
margin-top:6px;
border:1px solid #ccc;
padding-left:4px;
text-transform:capitalize;
}
}
Am I doing something wrong with this?
The links is http://2click4.com/new/mobile/home.php
Reverse the order start with the biggest and have the smallest at the end. For smaller size, you only need to define the rules that changed between the current size and the previous as the 360 will carry the rules from 400 and above.
#media only screen and (max-width: 400px) { ... }
#media only screen and (max-width: 360px) { ... }
#media only screen and (max-width: 320px) { ... }
http://jsfiddle.net/88wgM/
Resize the viewing area and see the change, if you reverse it like in your code, it does not work
Make sure you have
(max-width: 400px)
the () and : after max-width
When you starting develop responsive design its very important you specify the orientation!
/*Tablet devices*/
#media only screen and (min-width: 0px) and (max-width: 320px) and (orientation: landscape) {
...
}
/*Tablet devices*/
#media only screen and (min-width: 321px) and (max-width: 360px) and (orientation: landscape) {
...
}
/*Tablet devices*/
#media only screen and (min-width: 361px) and (max-width: 400px) and (orientation: landscape) {
...
}
First off all you need to specify the lowest width devices. Then you move to biggest ones!
Here is a good boilerplate you can use to start your media queries in your stylesheet.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */
I'm trying to create a responsive layout and using CSS media queries to make it fit in various screen resolutions.
But when I made created Media Queries for below mentioned resolutions:
/*1280 x 1024*/
/*1280 x 960*/
/*1280 x 800*/
/*1280 x 768*/
/*1280 x 720*/
Being same width, the broswer picks the last "720px" css only
Here is my code:
/*1280 x 1024*/
#media screen and (max-width: 1280px) and (max-height: 1024px) and (min-height: 961px) {
.resolution {
color:#0000ff;
}
}
/*1280 x 960*/
#media screen and (max-width: 1280px) and (max-height: 960px) and (min-height: 801px) {
.resolution {
color:#00ff72;
}
}
/*1280 x 800*/
#media screen and (max-width: 1280px) and (max-height: 800px) and (min-height: 769px) {
.resolution {
color:#1e00ff;
}
}
/*1280 x 768*/
#media screen and (max-width: 1280px) and (max-height: 768px) and (min-height: 721px) {
.resolution {
color:#ff00f0;
}
}
/*1280 x 720*/
#media screen and (max-width: 1280px) and (max-height: 720px) and (min-height:300px) {
.resolution {
color:#fffc00;
}
}
<div class="resolution">Lorem Ipsum</div>
Please suggest!!!
I put your code into a new HTML file and tested it at different resolutions. It seems to be working fine. Here's a screencast:
http://screencast.com/t/LdtVNqDDP
Here's a link to the browser addon you see me using in the screencast.