Community Forums › Forums › Archived Forums › Design Tips and Tricks › Parallax Pro Screen Width Divs?
Tagged: parallax-pro, screen-width
- This topic has 11 replies, 3 voices, and was last updated 10 years ago by Northumbrian.
-
AuthorPosts
-
August 30, 2014 at 3:27 pm #121939NorthumbrianParticipant
Parallax Pro. The easiest way to achieve screen-width Divs with full-width content?
A picture below [saves 1000 words] of what I'd like to do on a non-Home Page in PPro. My struggles are outlined in the Red Text ...
Many many thanks for anyone who can help...
– looks like Saruman is now running the Shire.
October 9, 2014 at 10:35 am #127207mowse.inkMemberBump this topic. I have found this possible solution, but it still requires some workaround.
Basically, I want to be able to create full width content sections just like on the home page. Would also be great to be able to apply the parallax sections on other pages besides home.
Can anyone please offer some guidance?
🙂 jonathanOctober 9, 2014 at 10:49 am #127209NorthumbrianParticipanti am in the middle of solving this notwithstanding any mo' beddah solutions that might appear.. [NOT even remotely interested in Divi or 3rd Party Page Template Plug-ins [e.g. ig-pagebuilder or whatever it is this week]]
This solution below appears to work but, caveat, not all permutations have been tested...
Starting with the Parallax Pro child theme's style.css I saw this below:
.site-inner, .wrap { margin: 0 auto; max-width: 1200px; /* 6/2 changed from 1140px */ } .site-inner { clear: both; margin-top: 170px; } .parallax-home .site-inner { margin-top: 100px; /* 6/16 watch this one */; max-width: 100%; } .parallax-landing .site-inner { margin-top: 100px; }
I then created a new class in [child theme's] style.css called .screenwidth.
Then added it like so:
/* My Screen Width Pages 8/31/2014 */ .screenwidth .site-inner, .screenwidth .content-sidebar-wrap, .screenwidth .content { margin-top: 40px; max-width: 100%; width: 100%; padding:0; } .screenwidth .wrap { width: 1200px; margin:0 auto; } .screenwidth .content .page { margin:0; }
Then, added the .screenwidth to the custom class in a Page layout like below:
Looks like this [under dev.]
http://104.131.132.233/products/
Comments welcomed. Thanks.
– looks like Saruman is now running the Shire.
October 9, 2014 at 11:40 am #127216mowse.inkMemberYour solution seems very workable, Anakyst. Thanks for sharing!
I'm trying to make this simple for the client to be able to create these full-width sections with different background colors or images. Can you tell me how you're implementing it in your content area? Are you using divs? Is there a way to create this in the visual editor?
October 9, 2014 at 11:57 am #127220NorthumbrianParticipantalso, thanks for your link to the plugin. What workarounds did you come across?
Also, sorry, second thing I always do in all my WP installs is to turn off the visual editor. "...once bitten, twice shy.." 🙂
Code? No problem!!
Here's the Page linked to above - in full sloppiness!
– looks like Saruman is now running the Shire.
October 9, 2014 at 12:07 pm #127224NorthumbrianParticipantalso, fwiw, i have similar issues with clients wanting to edit their own site. Shocking!!
– looks like Saruman is now running the Shire.
October 10, 2014 at 11:53 am #127396colinMemberUnfortunately. it's not responsive. Have you made it responsive?
ThxOctober 10, 2014 at 12:31 pm #127400mowse.inkMemberI've tried to submit a reply twice, but it's not letting me. :-/
October 10, 2014 at 1:42 pm #127406NorthumbrianParticipantResponsive is on my to-do-list - when the client is happy with the boxes and general layout... I'm sure it's just a matter of adding in the .screenwidth where necessary.
– looks like Saruman is now running the Shire.
October 12, 2014 at 6:18 am #127398mowse.inkMemberThank you so much, Anakyst, for sharing your code.
I have only played with the Genesis Simple Page Sections a little, but it required some css tweaking to make it full width.
For both the solutions, if it was just me, it would be fine; but I think they require more coding than my client is going to be comfortable with. They love the look of Genesis and Parallax Pro but want to be able to build a site like AdamBraun.com doing most of the work themselves. I just don't think that's going to be possible without some custom coding.
I know a page-builder is not what you're looking for, Anakyst, but I'm curious to know how something like Visual Composer might work with Parallax Pro.
October 12, 2014 at 8:30 pm #127613NorthumbrianParticipant"...if it was just me, it would be fine; but I think they require more coding than my client is going to be comfortable with. They love the look of Genesis and Parallax Pro but want to be able to build a site like..."
+10 to that!
Visual Composer appears to work well for the challenges involved in the quote above. In addition VC has extensibility [if that's the right word] that many others have taken advantage of [e.g. VC-popup, VC-ihover etc..]. I would think it's well worth a try. It has depth, breadth and is designed to be a drag-n'drop [visual] solution. Given a few days commitment to learning I would think it should serve well.
Another thing you could look at, if you're not too far down the road, is Divi. It's a substantial solution - and not just to the issue that started this thread.
http://www.elegantthemes.com/gallery/divi/readme.html
– looks like Saruman is now running the Shire.
October 20, 2014 at 7:49 am #127399mowse.inkMemberThank you so much, Anakyst, for sharing your code!
I have only played with the Genesis Simple Page Sections a little, but it required some css tweaking to make it full width.
For both the solutions, if it was just me, it would be fine; but I think they require more coding than my client is going to be comfortable with. They love the look of Genesis and Parallax Pro but want to be able to build a site like AdamBraun.com doing most of the work themselves. I just don't think that's going to be possible without some custom coding.
I know a page-builder is not what you're looking for, Anakyst, but I'm curious to know how something like Visual Composer might work with Parallax Pro.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.