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
Related
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
This is code for a two photos grid with a text hover. I want to make this grid responsive for mobiles and I'm stuck at rescaling code for photos.
This is my code
HTML:
<div class="plansgrid" align="center">
<div class="pic">
<img src="images/planssgrid/mcp.png" />
<div class="text">
<h1 style="font-weight: bold;">Medical Cash Plan</h1>
<p>Recrive Cashback to reduce the cost of your everyday medical expenses</p>
</div>
</div>
<div class="pic">
<img src="images/planssgrid/pcp.png" />
<div class="text">
<h1 style="font-weight: bold;">Personal Accident Plan</h1>
<p>Fracture benefits and cash lump sums from accidental injury</p>
</div>
</div>
</div>
CSS:
.pic {
display: inline-block;
position: relative;
max-width: 100%;
height: auto;
overflow: hidden;
}
.text {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 0;
text-align: center;
background: rgba(255, 255, 255, 0.7);
transition: height 0.7s ease-out;
color: darkgreen;
}
.pic:hover > .text {
height: 150px;
}
When I entry on website from a mobile, image is not scaled, is only croped. I want to scale this image, to fit for a mobile device.
Please help me with this.
Thank you very much :D !
Here you have a live preview of this grid: http://hciit.atwebpages.com/
Try adding this to your css, to make your image responsive:
.pic img {
width: 100%;
}
in your situation I think the ideal way to do it would be to resize the image and have it saved in many different sizes so on mobile it won't download it full resolution. then you can use a css trick to resize it based on resolution like this
you can read some more about it here CSS Tricks
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
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 am trying to make a simple webpage responsive but somehow, after the first breaking point, nothing happens. I put the whole code in this fiddle: https://jsfiddle.net/Cilvako/umwhLdqx/
Bellow are the breakpoints I am trying to use but still haven't got to the third since I couldn't make the second work.
/Media Query/
#media screen and (min-device-width : 1px) and (max-device-width : 480px) {
}
#media screen and (min-width : 481px) and (max-width : 768px) {
}
#media screen and (min-width : 769px) and (max-width : 1200px) {
}
#media only screen and (min-width : 1200px) {
}
Don't mix device-width with the normal width if you can. Simply use min-width and max-width if you're targeting only browser window size.
Read this if you're confused CSS media queries min-width and min-device-width conflicting?
You are supposed to write CSS in the media queries and also close and open them properly using '{' and '}' which you are not on the fiddle.
A media query looks something like
#media screen and (min-width : 769px) and (max-width : 1199px) {
h1 { color: blue; }
}
#media screen and (min-width : 1200px) and (max-width : 1800px) {
h1 { color: green; }
}
So between 769px and 1199px, h1s would be blue, and between 1200px and 1800px they would be green. I'm not seeing that in your JSFiddle - the brackets are not closed properly, and I can't see what you're trying to do with the rules.
You almost never ever ever need a max-width
fiddle
body {
background: gray;
}
#media screen and (min-width: 500px) {
body {
background: red;
}
}
#media screen and (min-width: 500px) {
body {
background: red;
}
}
#media screen and (min-width: 800px) {
body {
background: lightblue;
}
}
#media screen and (min-width: 1000px) {
body {
background: orange;
}
}
#media screen and (min-width: 1300px) {
body {
background: pink;
}
}
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 */