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%; }
}
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'm trying to make the padding around a div scale from 15% to 5% within the bounds of a media query.
So, let's say I've defined the min & max width where I want this to take effect:
#media (min-width: 500px) and (max-width: 1500px)
My goal is to go from 15% # 1500px to 5% # 500px. I know doing this will require an equation to change the ratio based on screen width, but I'm unsure about/inexperienced setting these types of things up.
Any advice/suggestions are appreciated!
The official answer is this can't be done using CSS alone.
However, you can use something like this for a workaround...
div.dynamic {padding:5vw; border:1px solid;}
#media (min-width: 500px) and (max-width: 599px) {div.dynamic {padding:5vw;}}
#media (min-width: 600px) and (max-width: 699px) {div.dynamic {padding:6vw;}}
#media (min-width: 700px) and (max-width: 799px) {div.dynamic {padding:7vw;}}
#media (min-width: 800px) and (max-width: 899px) {div.dynamic {padding:8vw;}}
#media (min-width: 900px) and (max-width: 999px) {div.dynamic {padding:9vw;}}
#media (min-width: 1000px) and (max-width: 1099px) {div.dynamic {padding:10vw;}}
#media (min-width: 1100px) and (max-width: 1199px) {div.dynamic {padding:11vw;}}
#media (min-width: 1200px) and (max-width: 1299px) {div.dynamic {padding:12vw;}}
#media (min-width: 1300px) and (max-width: 1399px) {div.dynamic {padding:13vw;}}
#media (min-width: 1400px) and (max-width: 1499px) {div.dynamic {padding:14vw;}}
#media (min-width: 1500px) {div.dynamic {padding:15vw;}}
<div class="dynamic">This is the div</div>
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 */
}
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.