This won t work. how can i accomplish something similar?
#media screen and (max-width:480px) {
#import url("style480.css");
}
Try like this
<link rel="stylesheet" media="screen and (max-width: 480px)" href="style480.css" />
Related
In my style folder I have 2 sub folder as mobile and desktop both of them imported in the main style/app.css file like:
#import 'mobile/mobile';
#import 'desktop/desktop';
It works fine. But I case, this import need to split in to 2 different screen sizes, so I do like :
#media only screen and (max-device-width: 768px) {
#import 'mobile/mobile';
}
#media only screen and (min-device-width: 769px) {
#import 'desktop/desktop';
}
But not works. getting error as :
Error: You may not #extend an outer selector from within #media.
You may only #extend selectors within the same directive.
From "#extend .text-uppercase" on line 237 of tmp/sass_compiler-input_base_path-7VVKdugf.tmp/bootstrap/_type.scss
how can i fix this? any one please help me?
Thanks in advance.
Imports needs to be done before any style declaration.
But regarding to this answer, you can do the following:
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="desktop.css">
You can try something like this:
#import url("desktop/desktop") only screen and (min-device-width: 769px);
or you can do this in SASS:
#media only screen and (min-device-width: 769px) {
#import "desktop/desktop";
}
and will generate into:
#import url("desktop/desktop") only screen and (min-device-width: 769px);
the project I'm working on has 3 css pages - probably not the best but this is the syntax:
<link href="/cg/ui/css/desktop.css"" rel="stylesheet" type="text/css" media="only screen and (min-width:800px)" />
<!-- Tablets -->
<link href="/cg/ui/css/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 600px) and (max-width: 799px)" />
<!-- phones -->
<link href="/cg/ui/css/mobile.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 599px)" />
My question is, is there any way to do the same thing on a local stylesheet with those parameters? This does not work:
<style>
#media "all and (min-width: 600px) and (max-width: 799px)"{
/*this was my first guess, if possible but no works*/
}
</style>
Thank you, if possible it will make testing much easier!
#media all and (min-width: 600px) and (max-width: 799px)
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 have the following code:
<link rel='stylesheet' media='only screen and (min-device-width : 1281px)' href='css/screenAllLarge.css' />
<link rel='stylesheet' media='only screen and (min-device-width : 800px) and (max-device-width : 1280px)' href='css/screenSmaller.css' />
it is supposed to work for screen resolution 1281px and above. But When I re-size the screen it still applies the same screenAllLarge.css CSS file
I also changed the media='only screen' to media='screen but no luck. I am testing this with Firefox.
What am I doing wrong?
thank you
You must have cover the two differents options, set the intervals correctly
media='only screen and (min-width: 1281px)' href='css/screenAllLarge.css'
media='only screen and (min-width: 768px) and (max-width: 1280px)' href='css/screenAllSmall.css'
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
}