Question

I’m having trouble with ads – I’ve placed them in widgets and now the mobile version of the site sucks – the ads are too big for a phone and ruin the theme. What I came up with right now is this:

.mobile #widget{
display: none;
}

But the thing is, the #widget doesn’t work and I don’t know how if it’s possible to get rid of widgets like that. Please correct me if I’m wrong.

Answer 1

What you wrote doesn’t really make much sense because you’re writing your CSS as if this scenario existed:

<div class="mobile">
    <div id="widget">your ad</div>
</div>

This obviously does not exist.

You can see here how the theme targets mobile devices with @media queries from the CSS file located on your site:

http://nix-pix.co.uk/wp-content/themes/alyeska/assets/css/responsive.css

So, it’s actually pretty simple — Any custom styles you want to target mobile would simply be placed inside a @media query like this:

@media(max-width:480px){
    /* All styles for mobile devices go here. */
}

What that basically says in plain English is: “IF the device’s viewport is 480px or less, include this CSS” — This is quickly becoming one of the most modern and popular ways to target mobile devices because there are now so many out there. Many believe it’s sort of backwards thinking to try use javascript or the user agents with PHP to specifically target the iPhone or the Android phone, etc. These methods definitely have their purpose, but not really for things that are this simple, in my opinion. Instead, we use CSS @media queries to target different device widths.

Ok, so now you want to hide where you have that Ad area towards the bottom of the content. Upon inspecting it with a tool like Firebug or Google Chrome’s web developer tools, we can quickly see it’s wrapped in a class called “main-bottom” —

Since we know in CSS when you’re referring to a class we prefix it with a period, and to hide an element we can use the display property, we’d just now put this into our @media query.

@media(max-width:480px){
    .main-bottom {
        display:none;
    }
}