Change Width of Post using Custom Post Class

[scaught]

Hey, all.

I need to widen the content area for some specific content. I would like to use the Custom Post Class option but am running into a problem.

Simply put, I want the content area 1000px wide. However, when I use a customer class like this:

.livestreamwide {
width: 1000px;
}

The content widens correct but SHIFTS to the right. I can add a negative left-margin to fix but I know that's wrong.

What would I add to this class to fix the "shift-to-the-right" problem?

Thanks,

[Victor Font]

Can you post a link to the site? You're probably bumping up against the structural wrap.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[scaught]

Our Approach

[Brad Dalton]

Try line 641 style.css

.landing-page .site-inner {
	margin-top: 0;
	max-width: 840px;
}

---

Tutorials for StudioPress Themes.

[Victor Font]

As I was reviewing the source code on your site, I couldn't help but notice that you are using div align="center" throughout the page. The <div> align attribute is not supported in HTML5. You should be using CSS instead. https://www.w3schools.com/tags/att_div_align.asp

The reason your content area is being pushed over to the right is because the CSS for .full-width-content .content has a max-width of 840px. The custom post class would be a child element of content. It has no room to grow.

A better approach might be to add a content class and set that to max-width: 1000px for the specified pages.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[scaught]

Thanks for the CSS center tip. It doesn't work on the videos being centered, however.

Great info on the width problem. You win smartest guy on the Internet for today!

I, otoh, am NOT in that league and am not sure how to. . ."add a content class and set that to max-width: 1000px for the specified pages."

Could you help a bit more with this guidance? Where and how would I do this?

Thanks!

[scaught]

Thanks for the idea. Tried increasing to 1000px, still have same problem.

[Victor Font]

This should help adding the class: https://victorfont.com/genesis-framework-add-a-custom-css-class-to-elements/

You would use the genesis_attr-content hook. You would also have to wrap your code in a conditional so it only changes the specified pages.

As for centering videos, you still shouldn't use align="center". It's not supported in HTML5 and will eventually fail you. You would create a class for .wp-video in style.css and use margin: 0 auto; to center the videos.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[scaught]

Thanks, Victor. I wish I knew where to do the things you're suggesting. . .but I don't.

Would it be possible to tell me:

1. What code to write and in what file?
2. How I would invoke the code in the specific page needing a wider page?

Thanks again.

[Author]

Posts