I checked my blog on tablets and netbooks and it looked a bit bad, so I made an extra css and added to header.php in between :
<head>
<link media="all and (min-width: 481px) and (max-width: 768px)" type="text/css" rel="stylesheet" href="tablet.css">
</head>
But nothing happens. How to add an extra .css to make this work ?
Also tried to add this function to themes functions.php, but blog crashes.
wp_enqueue_style('my-custom-style', 'get_bloginfo('template_url') . '/css/tablet.css',false,'1.1','all and (min-width: 481px) and (max-width: 768px)');
What should I add in 'template_url' and what is the simpliest way of achieving my goal?
Thanks!
Try this :
<link rel="stylesheet" type="text/css" href="path/to/your/css/file.css">
Add it to you template header.php file, after <?php wp_head(); ?> and after your last stylesheet.
If this fails add it just before the </head> tag.
Also make sur your the path to your stylesheet is correct, if your not sure use the full path:
<link rel="stylesheet" type="text/css" href="http://www.site.com/path/file.css">
Hope it helps
You just add the code below into the bottom of your stylesheet and apply the styles that you want for those specifications in there. That's for an exact size though.
#media all and (max-width: 768px) and (min-width: 481px) {
Your styles go in here
}
The code below this will target a max-width of 768px or a min-width of 481px.
#media all and (max-width: 768px), (min-width: 481px) {
Your styles go in here
}
Related
CSS
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="example.css">
what is the use of media="screen and (max-width: 480px) in this css attribute. Is this related with #media only screen (max-width: 480px) in css body. Please explain about this. I can't really understand.
If yes,
CSS
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width:8.33%;}
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width:8.33%;}
}
I have three formate for mobile, desktop and tablet in my CSS body. In this type how will I put it. Do I need to put multiple media tag in my css attribute.
Yes, its related.
You can use media queries in few ways.
You can declare some stylles in CSS body as You writed:
#media only screen (max-width: 480px)
Or You can specife in html which .css file will be used in which situation:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="example.css">
So You can use media queries in multiple ways.
I suggesty You, when You have several lines of css code to put in media - use this inline form in css body. When You want to put some big amount of code -it's better to refactor this to different files. The code will be more clean and decent.
I'm trying to hide and show a column when it's on desktop or on mobile.
I've been trying for few hours to make it work but to no avail. As you can see in the images attached, the one circled in red is what I'm trying to hide.
I tried to put in extra class named hide_mobile for the one I but it didn't work:
#media only screen and (max-width: 674px) {
.hide_mobile{
display:none !important;
}
}
Mobile
Desktop
Any help would be greatly appreciated.
Thanks.
if you are using wordpress you can do a stylesheet only for mobile.
For example mobile.css and with a php code in the header, you can call it only when you are using a mobile phone.This is an example for mobile and ipad:
<link rel="stylesheet" media="screen and (min-width: 80px) and (max-width: 700px)" href="/wp-content/themes/theme-child/iphone.css">
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='/wp-content/themes/theme-child/ipad.css'>
With me it works great.
This question already has answers here:
Why are my CSS3 media queries not working on mobile devices?
(23 answers)
Closed 9 years ago.
I keep trying to do a media query in my CSS doc doing something like:
#media screen and (max-device-width: 480px) { /*css here*/}
but it won't work when I test it on an iPhone. I've tried changing the sizes and using the portrait/landscape feature, but still nothing. What am I doing wrong?
Check that you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head of your doc
I always call mine when I link the CSS in the head of the HTML.
An example from a current page I'm working on:
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />
This selects the CSS doc that will be loaded right from the start instead of selecting styles after the CSS document is loaded (reduces number of HTTP requests)
When doing this within the CSS document itself, you should generally replace max-device-width with max-width.
this is a samples media query css
/************************************************************************************
smaller than 980
*************************************************************************************/
#media screen and (max-width: 980px) {
your css here
}
/************************************************************************************
smaller than 650
*************************************************************************************/
#media screen and (max-width: 650px) {
your css here
}
/************************************************************************************
smaller than 560
*************************************************************************************/
#media screen and (max-width: 480px) {
your css here
}
Hard to understand as you have not provided the code..but the common mistake people do it by not adding this meta data
<meta name="viewport" content="width=device-width, initial-scale=1">
Use "max-width" instead of "max-device-width" which is fixed per device.
I'm not sure but I think the max-device-width of an iphone is 640px. Give it a try.
#media only screen and (min-width : 480px) {
}
It seems to work fine in both Android and iPhone.
I have a css file that I want him to be used only if the viewport is 1024 and higher.
how can I declare my css file to be loaded only and based on a viewport i'll decide about?
You can use the media attribute.
<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="style.css" />
Another solution:
<style>
#media only screen and (min-device-width: 1024px)
{
Whatever you want for css...
}
</style>
I need to float a div to the left when on the portrait mode via iPad. No matter what code that's inserted, nothing changes. Here's what I'm doing:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.logos{
float: left;
}
}
The site I'm working on: http://rachelsilberman.com/rob-anolik/
The "logos" div pushes down when someone is on the iPad, and I need it to float left so it will align with the contact div.
I've been using ipadpeek.com to view the outcome since I don't have one myself. Hopefully that doesn't make a difference.
Thanks!
You should be adding the attribute to your ipad css like below:
#media only screen and (min-device-width: 768px)
and (max-device-width: 1024px) and (orientation:portrait) {
.logos{
float: left;
}
}
GENERAL RULE FOR CSS FOR IPAD IS LIKE BELOW:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
I figured it out tonight. This may help others. I had to comment out the following line in my library.php file:
<!--<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/css/tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />!-->
After this, everything referred to the main style.css sheet which I wanted. I included two statements:
#media only screen and (min-width:641px) and (max-width:1023px) and (orientation:portrait) {
and
#media (max-device-width: 600px) and (orientation: portrait) {
Due to the issues I was observing on a Blackberry Playbook versus an iPad, I had to introduce the second #media line. I simply tweaked the values within those sections of my style.css code and voila! Everything works finally.
Here's a great site on the different sizes for screens: http://nmsdvid.com/snippets/