Slider Revolution with the same Site Width (%)

[mauriatti]

Hello,

My site has Max Width 1200 px and width 88%, how to put my slider with the same width?

Regards

[basanta]

Hi There,

Thanks for asking!

Please make the slider auto width, so that it will adapt the container/site width!

Hope this helps!

Thanks

[awecesar]

Hey @basanta,
I the same problem which is almost fixed by your suggestions. I now have my slider set to auto and it has the same site width (88%) as the rest of my x theme BUT I want my slider to be full width (100%). How do I do that and still have the elements in my slider align to the 88% width?
Thanks

[basanta]

Hi There,

The content inside slider doesn’t depend on the site width.
You have to set the content layer width according to your site max width set in theme option.

Hope this helps!

Thanks

[awecesar]

Hey,
thanks but the site max width is not only 1200px but also 88%. How do I achieve those 88%?
Thanks

[lely]

Hi There,

See this guide:
https://www.themepunch.com/revslider-doc/layer-responsive-behavior/
On 2. Boxed (Grid Based) vs. Full-Width (Slide Based) Alignment > Set Width value accordingly.

Hope this helps.

[awecesar]

Hey @Lely,
thanks for helping but I’m still not able to achieve what I am sure is standart for a slider.

I just want to have the elements in my slider align width the width container from my x theme.
See the attached screenshots to see what I mean. The green line is where I want the blueish box in my slider to be aligned.
Thanks!

[thai]

Hi There,

Please make sure the Horizontal Offset is set to 0:

If it still doesn’t work, would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

• Link to your site
• WordPress Admin username / password

Thanks.

[awecesar]

hey,
I attached the login data.
The rev slider is on the start page (there is only one at the moment).
Thanks!

[thai]

Hi There,

I’ve set the layer align to left:

And also add this custom JS, everything is fine now.

jQuery(document).ready(function($) {
	$('.hero-teaser').css('margin-left', ($(window).width() - $('header > .x-bar > .x-bar-content').width())/2);
});

Can you have a look?

Regards!

[awecesar]

hey @thai,
as soon as I make the browser window a little bit smaller it is not aligned to the “neanderbad” logo on the left again…
see screenshot attached

[awecesar]

hey, fixed it to a function firering on scroll and now its working. thanks!
jQuery(window).resize(function(event) {

jQuery(window).resize(function(event) {
var $ = window.jQuery;
$(’.hero-teaser’).css(‘margin-left’, ($(window).width() - $(‘header > .x-bar > .x-bar-content’).width())/2);
});

[thai]

Glad you’ve sorted it out