Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing the width of the content in Parallax Pro
Tagged: content width, parallax-pro
- This topic has 5 replies, 2 voices, and was last updated 10 years, 1 month ago by
Jason Weber.
-
AuthorPosts
-
December 29, 2014 at 1:53 am #135520
Jason Weber
MemberI'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!
https://nationalcdp.org/December 30, 2014 at 3:38 pm #135698chrismcintosh
MemberHoping 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;
}January 5, 2015 at 5:20 am #136095Jason Weber
MemberHey, thanks Chris.
That certainly did the trick.
Thanks for the tip -- precisely the effect I wanted!
January 5, 2015 at 5:40 am #136096Jason Weber
MemberOops .. 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!
January 10, 2015 at 10:23 am #136888chrismcintosh
MemberYou 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;}
January 10, 2015 at 12:15 pm #136895Jason Weber
MemberHi 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.