Responsive Slider – Remove Border & Space Around Image

[Kim]

Hi. I am using Parallax Pro. I followed the instructions here to add the slider at the top above the home widgets. I currently only have one image set up so there is no "sliding" at this time. However, it works well.

My question is how do I remove the gray border & the white space around my image? I would like the image to fill the entire area. Both my image & my genesis slider settings are 1700 x 500.

Thanks so much!!!!

http://www.ignition.church

[Marcy]

In the tutorial, in the style.css section, Sridhar has:

.home-slider #genesis-responsive-slider {
     border: none;
     padding: 0;
} 

This is the section that removes the white and gray borders.
If it doesn't work when it is added like that, you may have to use !important, like this:

.home-slider #genesis-responsive-slider {
     border: none !important;
     padding: 0 !important;
} 

---

Marcy | Amethyst Website Design | Twitter

[Kim]

Thank you for responding. Unfortuantely, putting "!important;" in the location made no change. =(

I'm at a loss and my client really wants it removed.

[Marcy]

This is what you have:

.home-slider #genesis-responsive-slider {
	border: none; !important;
	padding: 0; !important;
}

Note that you have two " ; " per line, and I have only one. Perhaps you could just copy and paste?

---

Marcy | Amethyst Website Design | Twitter

[Kim]

Thanks, Marcy. I copied & pasted it hoping it would work and it did not. Hummmm....

[Marcy]

Try moving the slider CSS up into your main CSS section in your style.css.
You want that CSS for ALL screen sizes.

When a tutorial tells you to add the code to your style.css, they usually mean just BEFORE the @media sections, unless they tell you to add to a particular @media section.

It looks to me like your slider CSS is currently stuck down in the @media sections, and it looks to me like the parenthesis around your @media sections are off.

First move the slider CSS above ALL @media sections.
Then carefully look at what you have in the @media and match the close parentheses on each of those sections.
Go back to the original CSS to compare line-by-line, if you need to.

You can do this!

---

Marcy | Amethyst Website Design | Twitter

[Kim]

Hummm okay I'm not sure I understand. I moved the slider CSS up before the @media section. The @media section is the original code as I've done nothing to that. Are you referring to what looks to be extra parentheses like it shows below? Remove the last one?

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

.home-slider .slide-excerpt {
width: 100%;
}

}

[Kim]

Okay, I should have checked....after moving the slider up the borders are gone. The @media section is exact to the original so I guess that's all I needed to do was move it! Yay! Thank you so much Marcy, I really do appreciate it!!!!!

[Marcy]

You're welcome!

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts