CODEWITHSUNDEEP
csswordpress
Tom
Tom

Reputation: 1

How to remove class using CSS?

I'm trying to make my wordpress blog responsive for mobile devices. I was able to customize homepage in style.css, but I'm having some problems with single post page.

The problem is: I have three columns and I want to remove right and left sidebars. But they are not id like on homepage, but classes.

Single post page has one id (#postcolumn) with 3 classes: .leftsidebar, .postzone and .rightsidebar. How do I remove .leftsidebar and .rightsidebar?

Here is my code for homepage, which is working great...

@media only screen and (max-width: 480px) {
    #wrapper, #header, #column {
        width:400px;
    }

    #middlecolumn, #rightcolumn, #header, #footer {
        display:none
    }
}

Upvotes: 0

Views: 2495

Answers (1)

Tim McClure
Tim McClure

Reputation: 1192

If I understand your question correctly, your HTML markup for your single post page looks something like the following:

<div id="postcolumn">
  <div class="leftsidebar">
    // something
  </div>
  <div class="postzone">
    // something
  </div>
  <div class="rightsidebar">
    // something
  </div>
</div>

Applying the same logic as your home page, the CSS would look like:

@media only screen and (max-width: 480px) {
    #wrapper, #header, #column {
        width:400px;
    }

    #middlecolumn, #rightcolumn, #header, #footer, #postcolumn .leftsidebar, #postcolumn .rightsidebar {
        display:none
    }
}

Upvotes: 1

Related Questions