[Paulo TebetParticipant]

I was able to define a Slider and include it on my homepage at

http://development.paulotebet.com

Is is responsive but the problem I am facing is that there is no space on the sides, it takes the whole width of the page. I would like to set some pixels as a left and right margins.

Where can I do this?

Thanks.

[Paulo TebetParticipant]

On my original post I forgot to tell that the Slider was added with “Slider Settings: Below Masthead” option for the page.

I then decided to play a bit with some HomePage examples from the X Theme and I used the Integrity 3, which can be seen at

http://development/paulotebet.com/Home-3

I was able to insert using Visual Composer the Slider that I wanted as an element to the top of the page. It is working and fully responsive, now with some margins to the top, left and right but I’ve noticed that what gives the margin that I want is a subtle gray background rectangle to the Slider. At the bottom I don’t have a gray margin because of the Slider Shadow effect itself.

Below the first slider on the page, I’ve tried to include the Slider inside a “Content Band” but in terms of margins I am getting the same Gray Background Rectangle effect.

How do I get rid of the Gray Box behind the Slider?

Or maybe, if what gives me the margins is the Box behind the Slidern, then a better question would be: How do I control the color of this box?

Regards,

[Paulo TebetParticipant]

Please use the following url for the http://development/paulotebet.com/Home-3 mentioned above:

http://development.paulotebet.com/home-3/

or

http://development.paulotebet.com/?p=6740

Regards,

[Paulo TebetParticipant]

I found where to control the color of the background. It is a property of the Slider itself on the right side of the screen there is a section for “Appearance” / “Background Color” …. Slap on the forehead…. 😉 Should have seen this before….

I will open another post about the size of the slider not respecing the size of the site.

[ZeshanMember]

Glad to hear you found it by yourself! 🙂 Have a good day!

[Paulo TebetParticipant]

In fact I was able to control the color of the background but I still need to find a way to create a left and right margins to the slider.

Specially when viewed at full screen (iPad, iPhone) there are no margins to left and right and I think it would be more pleasant to the eye to have some room around it.

Where can I control the size of the margins for the slider?

Thanks

[ChristopherModerator]

Hi there,
Please add the following CSS code under Customize -> Custom -> CSS:

@media (max-width:979px){
.wpb_revslider_element.wpb_content_element {
margin: 0px 30px;
}
}

This code will add margin for screen smaller than 979px.
Hope it helps.

[Paulo TebetParticipant]

Thanks, but I would rather have the margins applied always, no matter what size of the screen.

The behaviour of Rev Slider in terms of size (specially the width) is driving me nuts…

My goal is to have a Slider just below the masthead in such a way that the whole Slider included the shadow is seen on any screen size.

From my tests, I realize that if I use the Full Width instead of boxed, then no matter what size do I make the images used for the Slides in the Slider, the image get stretched to fill the “full width” and pixelate it. Even if someone is seeing my site in a browser in full screen on a full hd monitor, I don’t want the slider to go that wide..

I would like to control the maximum size of the slider itself and add the margins (specially to left and right).

It seems that the only way I can have this behavior is to set the site to be “Boxed” then the Slider stays within the boundaries of the “Box”, but even though I need the left and right margins….

If I have to go the “Boxed” route, can I turn off the visuals for the box, meaning turning off the lines that defines the Box? I would just like to have the behaviour of a Boxed Site, but not the visual of a Boxed Site… Can this be done?

Would it be possible to have some elements on a page to ignore the Boxed site and behave like full width?

Regards,

[ZeshanMember]

Hi there,

Instead of using a boxed layout, you can use following CSS code to add maximum width condition to your below masthead slider:

.x-slider-revolution-container.below {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 10px;
}

Change 1200px to increase/decrease the width of the slider on desktops and 10px to adjust the right/left spacing.

Hope this helps. 🙂

Thank you.

[Paulo TebetParticipant]

Thanks a lot. It is now working.

Would it be too complicate to check for the current screen width and change the max-width accordingly?

Now I have to use the smallest possible size to be able to fit entirely from notebook, to iPads to Full HD monitors…

Regards,

[RadModerator]

Hi there,

Yes possible, you will just need to wrap it with media query.

Example :

@media ( max-width: 767px ) {
.x-slider-revolution-container.below {
max-width: 80%;
}
}

Cheers!

[Paulo TebetParticipant]

I’ve upgraded to 3.01 and created my production site (www.paulotebet.com) and now all the discussions that we have in the past in this post is not working anymore….

Basically, what I am trying to accomplish is:

1.) Have a responsive slider with the maximum size of 1200 x 600
2.) No crop or stretch should occur in the images (slides) inside the slider ( The original images have already been cropped to the exactly proportion of 1200 x 600 and saved to as 1200x600px.
3.) I need an left and right “margins” to the Slider

All of these had already been fixed in the past, and I did copy the same CSS code to the Custom area of customiser, but this time it ins not working…

I will post a private message with the instructions to access my website.

Thanks.

Paulo Tebet

[Paulo TebetParticipant]

This reply has been marked as private.

[Paulo TebetParticipant]

Forgot to mention that my Website is configured like this:

Integrity Stack
Full Width
1200px max width
90% Site Width
70% Content Width

That’s why I’ve made my slider images exactly 1200x600px, so the slider itself will have the full width of the site.

[FriechModerator]

Hi Pau,

Thank you for writing in, Instead of static max-width: 1200px, lets do max-width:90% this will make your slider more responsive. And a side margin of auto will center your slider and give you a left and right spaces.

You can add this under Custom > CSS in the Customizer.

.x-slider-container.below {
	max-width:90%;
	margin:0 auto;
}

Please let us know how it goes. Glad we could help.

[Author]

Posts