Hiding a PHP element using css (WordPress)

Question

I'm working on a website for a friend, everything goes well so far, but there's one little thing I can't seem to figure out. I have included SmartSlider 2, which I want to hide on mobile devices. But since SS2 doesn't natively support this I tried by editing the code. Long story short, it won't work.

I've tried including the CSS in the file itself (header.php) :

<div class="slider" style="@media(max-width:1120px;){.slider {display:none;}}">
<?php echo do_shortcode('[smartslider2 slider="2"]'); ?>
</div>

For some reason, it still shows up, hopefully you guys can help me out. Thanks in advance.

Can you try it with the same values for max-width which are use in Bootstrap. See Herr for the values: http://stackoverflow.com/a/18850777 — schrieveslaach, Sep 13 '15 at 15:20

score 2 · Accepted Answer · answered Sep 13 '15 at 15:26

2

It will not work like you are trying.

you have to put this in custom css

@media screen and (max-width: 1120px) {
    .slider {
        display:none;
    }
}

and remove from here

<div class="slider">
    <?php echo do_shortcode('[smartslider2 slider="2"]'); ?>
</div>

and in media query CSS you have ; here @media(max-width:1120px; it's wrong

Fiddle

answered Sep 13 '15 at 15:26

Shehary

9,926
10
42
71

That did the job, I'm still getting used to the responsive stuff, thanks a lot :) – Guus Sep 13 '15 at 16:36

Hiding a PHP element using css (WordPress)

1 Answers1