How to remove class using CSS?

Question

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
    }
}

A pound / sharp # indicates an id as your #header shows. A class is indicated by a dot . as in .sidebar or div.sidebar — Stephen P
– Stephen P, Commented Apr 16, 2015 at 18:42

Tim McClure · Accepted Answer · 2015-04-16 18:40:09Z

1

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
    }
}

answered Apr 16, 2015 at 18:40

Tim McClure

1,1922 gold badges11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to remove class using CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related