1

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!

4
  • 1
    Why not just add media queries into the existing CSS sheet?
    – ayyp
    Commented Jul 29, 2011 at 19:57
  • 1
    Andrew, how to add this condition (,'all and (min-width: 481px) and (max-width: 768px)');) to simple media query inside an existing css?
    – funguy
    Commented Jul 29, 2011 at 20:02
  • Why no include it in the header.php? like: <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?/your_css_file/css />"
    – eveevans
    Commented Jul 29, 2011 at 20:19
  • eveevans, what to add in the 'template_url' brackets?
    – funguy
    Commented Jul 29, 2011 at 20:54

2 Answers 2

6

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

2

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
}
5
  • Which browser are you targeting and testing in?
    – ayyp
    Commented Jul 29, 2011 at 20:28
  • im targeting firefox and chrome and opera. If I open my blog on a normal pc or notebook its fine, netbooks or tablets - crappy.
    – funguy
    Commented Jul 29, 2011 at 20:58
  • lets say I have a custom.css with main css conditions and I want to include into it a conditional css like this: @media all and (max-width: 768px) and (min-width: 481px) { #navigation ul.rss li.sub-rss a { background: url("images/ico-social-rss.png") no-repeat scroll right center transparent; font-weight: bold; margin: 5px; padding: 45px 38px 40px 0; position: relative; right: 5px; }}
    – funguy
    Commented Jul 29, 2011 at 20:59
  • For any new styles you'd want to apply, you would need to make sure to reset any previous styles. Example: you have body { background:#FFFFFF; width:500px;} in your regular styling but on the other sizes you want it to be 200px. It would be `body {width:200px;}, but the background would still be white because everything cascades down.
    – ayyp
    Commented Jul 29, 2011 at 21:02
  • solved, I was targeting a bit different resolution, thanks everyone!
    – funguy
    Commented Aug 10, 2011 at 6:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.