Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

So I have made some customizations to my wordpress premium theme,but I want to hide those customizations on mobile versions. I've tried to add id of widget inside @media with display:none; but nothing, still active.

This is the code for the second sidebar I've made

inside theme's functions.php:

if (function_exists('register_sidebar')) {
register_sidebar(array(
'name'=>'Sidebar Left',
 'id'   => 'sidebar-left',  
      'description'   => 'Widget Area left',  
      'before_widget' => '<div id="sidleft" class="sidleft2">',  
      'after_widget'  => '</div>',  
      'before_title'  => '<h2>',  
      'after_title'   => '</h2>'  
     ));  
    }  

Inside index.php:

<div id= "sidebar-left" class="sidleft2"> <? php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Left')): endif;?></div >

How to hide it ?

The 2nd thing I made with customizations is from vertical posts (latests) I've made 4 blocks inline. Here I changed height and width. In default version of theme thumbs are small and no visible on mobile, only the title is shown.

Inside @media is this : ul.headlines li img, which hides those images, but the problem is that the changes I made now leave some gaps so its the title and below the title is the area where image should appear and since the line of code ul.headlines li img (display:none;) is used they don't, and only the place where the image should be is shown.What I want is to remove that gap on mobiles, like in default theme, but after 2 days no luck .

Any idea?

share|improve this question

1 Answer 1

You don't provide lots of details on your code. Something like this should work:

@media only screen and (max-width: 599px) {
  #sidebar-left {
    display: none;
  }
}
share|improve this answer
    
If it still doesn't work, add a !important, like this: display: none !important; –  Alex Dumitru Jul 28 '13 at 11:46
    
Hi Christian, what code exactly is missing so i can add it..This code doesnt seems to work..i tried that –  Max Jul 28 '13 at 22:00
    
Using the site responsivepx.com and setting the width there up to 599px width this sidebar doesnt show up.But using the sites like ipadpeek.com and similar ones, sidebar shows up. So i m little confused about it, as i want to disable it for every mobile device. –  Max Jul 29 '13 at 2:59
    
2nd thing as you can see in screenshot ( i42.tinypic.com/fumiw7.jpg) image is resized and there is a gap. In default theme look that image doesnt show up at all , and only the title is there.Inside theme function i v add a new image size for my needs,if i denied it on mobile i see a blank space where image should be, and i tried also to resize it to 100% width but no luck..i m newbie at this, so something i m doing wrong ..Thanks for the help –  Max Jul 29 '13 at 3:10
    
Can I see the site somewhere? I imagine another element is involved. –  Christian Lescuyer Aug 2 '13 at 15:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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