Centric Pro and MasterSlider

[emov]

Hi! I'm developing a site in Centric Pro. I'm trying to get a full width slider (MasterSlider) in the "Home 1" widget. Looks fine on desktop but when I scale down to 1023 px and down there is a space to the right of the page. You don't se it at first but you can scroll horizontally and it's there. I can't figure out what's causing this in my css! When i remove the master slider widget the problem goes away. I tried a blank installation of Centric Pro but the space/padding/margin to the right keeps showing up. I've tried removing all kinds of padding and margins but nothing works. I've never had this problem with the MasterSlider on any other Genesis Theme...

Any ideas?

I'm posting this on the MasterSlider Support too.

http://brastorp.manager.nu

[David Chu]

Hi!
It's sort of the plugin's fault, and sort of "not". 🙂 Sliders, no matter what plugin, are generally always wider than what's visible, and this one is a bit "over-excited". This bit of code will restrain that:

.home-featured  {
   overflow: hidden;
}

That should get you started. In other CSS contexts, this type of thing may not be needed.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[emov]

Thank you David! Works like a charm! 🙂

[David Chu]

I'm glad to hear it!

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[LO]

Hello,

I am having a similar problem. I am using the Soliloquy slider on my homepage. I am using the Centric Pro child theme.

I followed this article to make my slider full-width :::

Full width Soliloquy slider in Genesis

It sits in a custom widget, with class name .home-slider.

I've deactivated the Soliloquy and added the original stylesheet and I'm still getting a space to the right of the page as mentioned in the original post.

Only difference is mine is only appearing only the responsive media query of: @media only screen and (max-width: 480px)

I added

.home-featured {
overflow: hidden;
}

to my stylesheet and it didn't fix the problem.

Should I add something to this part of the stylesheet?

@media only screen and (max-width: 480px) {

body,
.home-featured .home-widgets-1 {
font-size: 16px;
}

.header-image .site-title > a {
background-size: contain !important;
}

.header-image .bumper {
min-height: 135px;
}

}

Any suggestions would be appreciated.

Thank you!

[Author]

Posts