Wordpress Page not reading css properly

Question

My wordpress page is skipping a css class, and it doesn't show well. It has no padding.

In my wordpress theme, all the pages have the .page .hentry class inside their class attribute.

The page "Ask" has this html code:

<article id="post-70" class="post-70 page type-page status-publish hentry">...

And works ok, but my Questions page don't

<article id="post-69" class="post-69 page type-page status-publish hentry">...

When I see the code with chrome, the article has the .hentry class only.

This is part of the css code:

.hentry {
    margin: 0 0 45px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
}
.page .hentry {
    padding: 45px;
}

This is the link to the page with the problem, and the other page

Johannes · Accepted Answer · 2016-09-29 01:00:21Z

1

.page .hentry means that it adresses elements with class hentry inside a parent/grandparent etc. element with class .page

Look at the classes in the body tag: The one page has class page in the body, the other one archive (and no page) So the .page .hentry selector only applies to .hentry in the page that has .page in its body tag, not the archive page.

if you want to address both, you can use .page.hentry as a selector (without a space in between) - this will apply to all elements that have both .page AND .hentry classes .

edited Sep 29, 2016 at 1:00

answered Sep 29, 2016 at 0:12

Johannes

67.9k22 gold badges85 silver badges139 bronze badges

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

Comments

Nick_O · Accepted Answer · 2016-09-29 00:41:37Z

1

The page that works has .page on the body class but the one that doesn't is missing that class from the body.

The selector is:

.page .hentry {
    padding: 45px;
}

but if .page is not present it will skip it.

Solution, they both use #main so change the css to:

#main .hentry {
    padding: 45px;
}

or just add the padding to:

.hentry {
    padding: 45px;
    margin: 0 0 45px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
}

Here is an another alternative:

.page.hentry {
    padding: 45px;
}

edited Sep 29, 2016 at 0:41

answered Sep 29, 2016 at 0:12

Nick_O

4575 silver badges19 bronze badges

2 Comments

JCAguilera Over a year ago

The problem with this is that other pages uses #main and .hentry so I can't change them. I tried to add the .page class to the body with jquery, but it didn't work.

Nick_O Over a year ago

then use .page.hentry {} do any other pages use that, they need to be joined together meaning both .page & .hentry are applied to the article element

Yuri Pereira · Accepted Answer · 2016-09-29 00:11:52Z

0

First, we need a jsfiddle/similar snippet to help you to solve your problems.

But my tip is, go to your theme folder(inside content/yourthemename) and inspect with some code editor like ATOM or SUBLIME and look for where's question page is being generated.

answered Sep 29, 2016 at 0:11

Yuri Pereira

2,0051 gold badge20 silver badges25 bronze badges

Collectives™ on Stack Overflow

Wordpress Page not reading css properly

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related