Changing the width of the content in Parallax Pro

[Jason Weber]

I'm trying to figure out how to change the width of the content in my pages / posts in Parallax Pro.

I've tried the obvious things:

• Changed .content {width: 700px; } to 800 px.
• Increased the max-width of the two largest media queries by 100px.
• Flushed my website and browser cache.

Still, however, the content -- the text, etc., is only about 665px in width.

Parallax Pro comes with a pull-right and pull-left CSS option for your images. With them, the total width is still about 1065px.

I'd like for the text to be wider -- more like 800 or 900 px., while still being fluid.

I do have the Genesis Extender, so I can easily tinker with custom CSS and custom functions, but I'm at a loss on this one.

Any guidance in helping me solve this would be greatly appreciated.

Thanks!

---

Webby’s WebPrezence
National Center For Due Process

https://nationalcdp.org/

[chrismcintosh]

Hoping I'm understanding your question.

The default padding on .content in parallax pro is 200px maybe try reducing it by 100px on each side using the code below?

.full-width-content .content {
padding: 0 100px 50px;
}

[Jason Weber]

Hey, thanks Chris.

That certainly did the trick.

Thanks for the tip -- precisely the effect I wanted!

---

Webby’s WebPrezence
National Center For Due Process

[Jason Weber]

Oops .. it messed up the Parallax Pro landing page, which probably goes by the latter half of this snippet:

.full-width-content .content {
	padding: 0 200px 50px;
	width: 100%;
}

.full-width-content.parallax-home .content {
	padding: 0;
}

Nevertheless, I'll figure it out. Thanks for putting me in the right direction, Chris!

---

Webby’s WebPrezence
National Center For Due Process

[chrismcintosh]

You might be able to fix that by attaching

.parallax-landing

before

.full-width-content .content

and entering the code you want specifically for the landing page
so if the original code I gave you undid something you can redo it just for that page.

.parallax-landing .full-width-content .content {padding: 0 200px 50px;}

[Jason Weber]

Hi Peter. Here is the code that worked for the pages/posts, but did not affect the landing pages:

.page .content {
padding: 0 135px 50px!important;
width: 100%;
} `

To elaborate, I set up media queries on top of this, so my full code is:

@media only screen and (max-width: 1140px) {
.page .content {
    padding: 0 135px 50px!important;
    width: 100%;
}
}
@media only screen and (max-width: 768px) {
	.page .content {
    padding: 0 30px 50px!important;
    width: 100%;
}
}
@media only screen and (max-width: 480px) {
	.page .content {
    padding: 0 0px 50px!important;
    width: 100%;
} 

Thanks for your help, Peter, and I hope this thread can help anybody else who wants the same type of effect.

---

Webby’s WebPrezence
National Center For Due Process

[Author]

Posts