Jump to content
andersen3

How do I make RoyalSlider fullwidth on my Platform Pro-based website

Recommended Posts

andersen3    0
andersen3

Hi,
 

Over the past week I have been working on redesigning my website, www.creativefuturemag.com, and yesterday I finally launched it. However, I ran into one small problem when I launched the website and visited it on different computers. The slider I am using (RoyalSlider) won't adjust according to the size of the browser. Right now its sized so it fits the size of my browser perfectly, however, I want it to be compatible with all browsers in all sizes.

 

Right now I have only been able to achieve some of it using the following CSS coding in the custom coding section of Platform Pro:

.royalSlider {
; 
margin-top: -160px;
}

Does anyone know how I can make the RoyalSlider adjust according to the size of the browser/window and still remain fullwidth?

 

Thanks and have a great day!

- Christian

 

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello Andersen 

 

using -160px padding may be a bad idea. you are using this to raise the slider over the top of your header.

 

In your header you have primary nav, Branding and Universal Sidebar without any content in them http://d.pr/i/6nck. Disabling these sections will mean no need for the -160px padding. 

 

Then you have the width of you slider set to over 1400px (your site is set to 1082px width which is less than 1400px. ) but you should consider using something like Max-width: 100%


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
andersen3    0
andersen3

Hi Martin,

Thanks a lot for the quick reply.

 

The reason why the slider is raised up under the navigation, branding and universal sidebar is because these elements are transparent. It is in other words a part of the design and something I have done on purpose.

 

However, I tried setting the max-width to 100% and it just sizes the slider down to the width of page area/content area and not the body. I am looking to make it fullwidth, so there's no white margins and so it adjusts itself according to the size of the browser window.

 

Any other ideas?

 

Thanks!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hello Christian,

 

First, this code has an errant ; in it:

.royalSlider {
; <-- errant code
margin-top: -160px;
}

Platform Pro didn't have perfect full width sections without selecting the proper layout and template.  SInce it's a deprecated legacy product, I'd strongly urge you to upgrade now to PageLines Framework which has more options for full width.  Unfortunately, we expect some future (short term, not long) update of WordPress to potentially kill Platform Pro. Support will not be available then, as it will be the end of life of the product, which officially was declared months ago.

 

Please write to hello@pagelines.com to ask for any possible discounts for Platform Pro clients in upgrading.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
andersen3    0
andersen3

Hi Rob,

 

Thanks a lot for your response.

 

I have one question - will I have to recreate and redesign my website entirely if I decide to upgrade to the new Pagelines Framework?

 

Also, is there really not a way of making the slider stretch according to the size of the browser window? When I set the width of the slider to 100% it just fits the size of the content area and not the body of my site. Isn't there an element within my site where I can put the slider inside of it with a 100% width?

 

Thanks!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

Even on a full width layout the content inside each section is placed within the content area. Only the background area of each container is placed full width across the entire width of the screen.

 

It could be possible to force the section/area to be full width using negative padding/positive margins, but it's not really an advisable practice and the results aren't guaranteed. See - http://www.pagelines.com/forum/topic/27415-full-width-headernav-with-fixed-width-site/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
andersen3    0
andersen3

Would it work if I added each slider to the body of my site? 

You help is very much appreciated, 

- Christian

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello andersen 

 

I think James's comment above answers this question 'Only the background area of each container is placed full width across the entire width of the screen.'


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
andersen3    0
andersen3

Hi Martin and James, 

Thanks a lot for the support & suggestions.

 

I am not really that great at coding yet (even though designing this website has taught me a lot) and the fact that my slider isn't working the way I want it to is seriously killing me, as it is the last step to perfecting my website. Could you maybe help me on what type of coding I need in order to place the slider within the background area of my site? It sounds like that's the only viable option.

 

Also, an alternative could be to create a different background header image on each page instead of an actual slider. Would that possible? I'm thinking something sort of like I have done this part of my site: http://creativefuturemag.com/about/

 

You help is really appreciated!

 

Thanks,
Christian

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi Christian,

 

Unfortunately, Royal Slider isn't a PageLines product, and you're trying to use it on a deprecated legacy product of ours.  There are full-width background sliders out there which I know work in PageLines Framework, but have no idea if they will work in PlatformPro.  Keeping in mind that PlatformPro used a much earlier version of jQuery than WordPress and Framework do today, I'm not at all surprised the slider doesn't work.

 

Since PlatformPro isn't fully supported today, and waning very, very fast, I'm urging you to quickly upgrade to Framework and use one of the sliders which are known to work full-width.  To be clear, the next upcoming update to WordPress could make PlatformPro break. No upgrades, updates or fixes for PlatformPro will be forthcoming.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Magne Nygaard
      By Magne Nygaard
      Hi,
      I am confused about the products your are offering.
      What is DMS, Platform and Pagelines!?
    • Perry
      By Perry+
      Hello there,
      We are still using DMS 2 and were wondering if it was at all compatible with slider revolution. (https://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380). Our issue is that the default revslider for DMS clips the top and sides of videos when made responsive. As the video is made smaller or larger the bottom of it tends to be cut off, or the sides are. We noticed slider revolution was 100% responsive, but have had numerous issues even getting it to display in DMS 2. We have tried using the shortcode, and various php scripts to no avail. Our last attempt was to try and load it with header scripts, but at this point we seem to be further away than ever. 
      This leads me to a few questions:
      1. Is Slider Revolution even compatible with DMS2?
      2. Is there a way we can get 100% responsive video in DMS 2 with zero clipping? (tonyrobbins.com is another good example of the effect we are trying to achieve.)
      3. If Slider Revolution is compatible, how do we go about adding it in?
       
      Thank you for any help.
       
    • MobileParity
      By MobileParity+
      Does anyone know what features have been included in the Foundation theme? Such as building blocks or the Motion UI?
    • vanessabt
      By vanessabt+
      Hi Developers, I wasn’t sure what the best way to get feedback was but didn’t really want to put this in the facebook group, I did put this in the slack developers group but trying to figure out the fastest way to get feedback.  I am starting a new site for a client and was looking through the showcase to see if there were any samples for slider modifications like I am trying to do for our build and couldn’t find them.  Basically I want to have a blue section at the bottom of each slide that has text in it.  The text will change with each slide along with the image.  Was wondering if anyone had any thoughts on how this modification could be made?  Here is a sample of the slider from the design.

    • paoloimperiale
      By paoloimperiale+
      Hi, 
      I was wondering if there's a way to modify the slider container size? My client would like it skinner- not as tall. How would you suggest doing that?
      Thank you.
      (this is for the paoloimperiale.com slider on the homepage) 
×