Content Area Height Issue

cinemunkie · Member · Apr 4, 2014 at 8:06 am
Copy link

Add topic to favorites
Hi all,

Another question for you here.

I’ve made the content area 1490px in height with the purpose of having the bottom of the content area line up perfectly with the footer.

But…the code I used is affecting ALL the pages…specifically the Home page.

Is there a way to target only the About Us, Theaters, Contact Us, Contribute and End Credits pages and leave the Home page alone?

Any help would be greatly appreciated.

Thank you.
```
/* center all posts & fix height*/
.hentry, .no-results, .error404 {
	padding: 43px;
	height: 1490px;
	border-bottom: 1px solid #333333;
}
```
The blog I need help with is: (visible only to logged in users)
designsimply · Member · Apr 4, 2014 at 7:13 pm
Copy link
I’ve made the content area 1490px in height with the purpose of having the bottom of the content area line up perfectly with the footer.

A fixed height value won’t work well because different people have all different browser height sizes. I would advise against trying to line up a footer area using a fixed height. Also keep mobile and tablet viewers in mind, if you made the height 1490px for a mobile view on a phone, that would be way too tall!

Is there a way to target only the About Us, Theaters, Contact Us, Contribute and End Credits pages and leave the Home page alone?

You can use body classes to target specific pages or specific types of pages. For example, go to http://bayareathrowbacktheater.com/about/ view the page source and find the body tag. You should see a whole bunch of classes listed. One of the classes is “page-id-1”

Using that body class, you could setup a rule like the following and it would only affect the About Us page and no other pages:
```
.page-id-1 p {
	color: red;
}
```
However, a good trick if you want absolutely everything except the home page to do something is to change it everywhere at once, and then add a 2nd rule to change it back on the home page. Here’s an example to illustrate that will turn all paragraphs red on every page of the site except on the home page where the paragraphs would be white:
```
p {
	color: red;
}
.home p {
	color: white;
}
```
Aside: I looked at the custom CSS for your http://bayareathrowbacktheater.com/ site and I see that you have copied a TON of CSS rules in there, but I think a lot of them are duplicating the theme CSS. Instead of doing that, I would really recommend taking all of that CSS out and then adding back just the CSS for things you are changing. It will make editing CSS a ton easier later.

You should check out this guide about editing CSS if you haven’t already:
http://en.support.wordpress.com/custom-design/editing-css/

And since you asked about targeting CSS, this tutorial page is a really good starter guide about CSS classes and ids which might help you:
http://www.htmldog.com/guides/css/intermediate/classid/
cinemunkie · Member · Apr 5, 2014 at 3:43 am
Copy link
designsimply,

Understood. I ditched the fixed height value.

Thanks for the crash course in targeting using body classes…and the links. Much appreciated.

Regarding my “ton” of CSS…yes, I still have quite a few duplicates in there. I left them there in case I made additional changes but plan to eventually get rid of them if they’re not being utilized.

Believe it or not, I’d say about 80 to 90% of my CSS changes ARE serving a purpose of some kind. Just take a look at any blog using the default Fanwood Light theme.

Thanks again for all your help.

No items found.