Footer settings changed for Contact Page Only

[lizonbc]

Hi again Jason,

When I was putting code in my Child Theme’s Function php today (when it should have gone in the Stylesheet) I crashed my site. Tech support at my server was able to get my site back by switching to the Twenty-Fifteen theme. Luckily I had a backup of my Denali Child Theme and the tech was able to retrieve it. However, in switching between Themes and back again to Denali Child Theme, the footer settings changed on the Contact page. Note that I use Contact Form 7 plugin for my Contact page.

What has happened is that instead of the 3 columns on my footers on all other pages on my website, columns 2 & 3 are stacked. Here’s the links so that you can see the difference:

http://www.ataitec.net/

http://www.ataitec.net/about-us-2/contact/

Is there anything I can do?

Liz

Topic

[Jason Bobich]

If you’re sort of fumbling around with PHP and relying on editing in the WordPress admin, this is bound to happen eventually. In the future, if that happens, just use your FTP program and go to /wp-content/themes/{your-child-theme}/functions.php, and edit whatever you messed up in the file.

In PHP, if you write one mistake, it can crash everything with a fatal error. This is why it’s helpful to have WP_DEBUG on so you know exactly what the error is and you can fix it.

https://codex.wordpress.org/Debugging_in_WordPress

And you’re breaking the footer columns on that page with this in your child theme’s style.css:

/* Adjust column widths on contact page */
@media (min-width: 992px) {
	.page-id-141 .col-md-9 {
		width: 60%;
	}
}
@media (min-width: 992px) {
	.page-id-141 .col-md-3 {
		width: 40%;
	}
}

[lizonbc]

Re: the footer, is it possible to fix it using CSS in the Child Theme just for that one page? I’m not asking you to. I’m just wondering if it’s possible.

[Jason Bobich]

I don’t know that I’m understanding what you’re asking — On your contact page, your columns stack on top of each other. This is happenning because of the CSS you’ve added to your child theme, which I outlined above. If you do not want the columns to stack like this on your contact page and this is what you want to “fix” — then simply delete that CSS you’ve added.

[lizonbc]

The problem is we DO want the CSS to stay because my boss wanted the right column to be bigger so that the one email that was so long wouldn’t have to be on two lines.

The question is, I’m thinking: Does he have to decide whether he wants the footer to be like the footer on all the other pages or if he wants that one email to be on one line?

[Jason Bobich]

Ohhh, so you’re trying to target the columns just in the main content area. I thought you were trying to change the footer columns for this specific page — that’s why I was so confused.

You just need to tighten up your CSS. For example, you could make your selectors for those columns more specific so it only applies to the columns in the main content area. Inspect in your browser, find a div that surrounds those columns, and use it to be more specific.

For example, this:

.page-id-141 .col-md-9 {

Could become this:

.page-id-141 .site-inner .col-md-9 {

Or, there’s different classes and ID’s you could use all together there on those elements, that aren’t shared with the footer columns.

.page-id-141 #content { ... }
.page-id-141 .fixed-sidebar { ... }

[lizonbc]

Thank you, Jason.

This was a HUGE help.

Best,

Liz

[Author]

Replies