[kingpupParticipant]

Imagine the following scenario. You want to make a slider containing layer elements (for instance text) which always stay perfectly flush with the leftmost edge of your site content (let’s use the left edge of the navbar logo as a reference). Let’s say your site width is 90% and site max width is 1500px.

So you set the slider grid size to 1500px and left align the elements you want to align to the left of the site content. The trouble is that Revolution Slider’s responsive behavior seems to differ from X’s when using a site width %. When the browser is above a certain width, the slider layers remain perfectly aligned. But when you reduce the width of the browser to the point where the site content starts to contract in response, the Revolution Slider layers don’t respond in tandem with the site content (as measured by the left edge of the navbar logo). After a point, the layers move further left than the logo.

I’ve spent hours trying virtually every kind of grid size and responsive setting in Revolution Slider and cannot seem to keep Revolution Sliders aligned with the site content in a way that the slider layers and site content remain aligned at all times. The trouble seems to me to be related to the fact that you cannot express anything within Revolution Slider in percentages, whereas I have the max site width set as a % in X. Is there a particular trick or strategy to this that I’m just not getting?

[ChristopherModerator]

Hi there,

Thanks for writing in!

To make slider layers responsive, please follow the links :

https://www.themepunch.com/revslider-doc/slider-setup/#layers-grid-size
https://www.themepunch.com/revslider-doc/layer-responsive-behavior/

Hope it helps.

[kingpupParticipant]

Thanks for those links to the documentation I’ve read numerous times already, but they don’t address the problem I outlined above which is that it’s almost impossible to get Revolution Slider layers to respond in the same way that X’s site width does.

[RadModerator]

Hi there,

You mean all element and layers should flush to edge regardless of screen width? Especially for larger screens?

Rev. slider is responsive but maybe you’re referring to another category of responsiveness, the fluid. Fluid will stay fitted 100% regardless of device size (hence, no need to set the size). While Rev. slider will respond to the device equal or less than the grid size that was set.

Example, if your grid width is 1024px, then it will respond to 1024px, 879px, 767px, and to any lower resolution. But, it will not respond to the device that has greater than 1024px. If you view it on 2000px, the elements and layers will stay in the restriction of 1024px, but, the background will extend the edge to edge (background is container based and not grid based).

It’s designed like that, if you wish to target much larger devices, then set a much larger grid size.

Thanks!

[kingpupParticipant]

All I’m looking to do is to have elements in Revolution Slider remain flush left with the left edge of my site content (which is at 90%, 1500px max width in the customizer). You agree I can set a grid size of 1500px in RS yes? OK. My site content will never be more than 1500px wide. So I should be able to set a grid in RS and have elements flush left with that grid, which respond in the same way to the width of my site. Like I said, you can get it “sort of” OK but when decreasing the size of the browser there is a point at which RS slider elements start responding differently to the X container. Even if you only have one grid defined in RS. You can try it and see. I just wondered if there was a trick to getting them to respond in the same way.

[ChristianModerator]

It might be due to your Grid Size. See https://www.themepunch.com/revslider-doc/slider-setup/#layers-grid-size for more details. Please adjust the settings according to your needs.

Thanks.

[kingpupParticipant]

Hi,

I was already linked to the documentation above thanks. And like I already mentioned, I understand grid sizes. That is not the problem. The problem is that even if you set your RS grid to be the same as the max width of your site, the edges of that grid do not respond in the same way as the edges of your site and so RS layers which are aligned with the edge of the grid will not always be aligned with the edge of your site content, if that’s what you’re trying to achieve. The Revolution Slider grid does not follow the site width % value you have set in the customizer and I feel that’s part of the problem.

Anyway just for an example, I set up a layer in Revolution slider to take a couple of screen shots so you can see what I mean. I have my site at max 1500px, site width 90%. I have set up a RS grid at 1500px, and the text layer you see above the navbar is aligned hard left with the grid with an offset of 0px.

In this first image, the browser is stretched out so that my site is at the maximum width of 1500px. Note the offset between the edge of my logo text and the edge of the text layer above it.

View post on imgur.com

Now look what happens when I contract the browser width below the maximum width of the site:

View post on imgur.com

This happens whether or not the layer has responsive offset enabled in the RS settings. I’ve tried all manner of grid sizes and settings and the bottom line is that the RS grid moves differently from the site container when resizing the browser.

[Paul RModerator]

Hi,

Can you provide us your site url so we can take a closer look.

Thanks

[Author]

Posts