can't get rid of grey area in promo slider

Kerstey, add this to your theme’s css file:

.promo_slider img {
    border: none;
}

That should override the border that your theme is applying to the images.

Hi,
I really like the promotion slider!

I have the 2011 theme installed and am trying to remove the grey line in the slider. I have found the theme’s CSS file, however, where exactly do I insert the code? Can anyone give me an exact location?

div.promo_slider .panel { background: none; }

https://dev.khartist.com/

You can actually add that code just about anywhere, as long as it isn’t in the middle of an existing rule. The beginning or end is a safe place.

I added the code to the Twenty Eleven: Stylesheet (style.css) at the bottom and it didn’t work.

/* =IE7
———————————————– */

#ie7 article.intro {
margin-left: -7.6%;
margin-right: -7.6%;
padding-left: -7.6%;
padding-right: -7.6%;
max-width: 1000px;
}
#ie7 section.featured-post {
margin-left: -7.6%;
margin-right: -7.6%;
max-width: 850px;
}
#ie7 section.recent-posts {
margin-right: 7.6%;
}
.promo_slider img {
border: none;
}

@khartist,

You will actually want to use this code:

div.promo_slider .panel {
     background: none;
}

What you inserted only applied to @kerstey

Thanks Micah, it worked. Awesome! A token donation is on its way! Cheers, Karen

Hi Micah,

I have set the sliders width and height according to the featured images
dimensions, I have also set the slider options for “default image” as full.

However the slider has some grey area on the right and bottom of the featured image, meaning to say the image doesn’t take up the whole space defined by the short code.

I am using the twenty-eleven theme.

I have not published my website so this is the screenshot:
https://img859.imageshack.us/img859/228/helps.png

Hope it’ll suffice.

Thank You
Amos

Images won’t stretch to fit your defined slider size if the images are smaller. The ‘Full Size’ image size in WordPress isn’t a set size, just the dimensions of the image when you uploaded. What could be happening is you took the dimensions from one image and applied them to your slider and then you uploaded a slightly smaller image and it doesn’t seem to fit anymore. I couldn’t really say with any certainty without looking at the actual slider HTML, CSS, etc.

I NEED MICAH!!!!

Why is there an empty area between my image and the border I applied using CSS? https://weheartphotography.com/

Thanks!!
Christin

Please post your own topic.

@esmi I couldn’t figure out how to. It’s my first day. Thanks for the help though!! ??

This rule in your theme is causing the issue:

.article-content img,
.article-content .gallery img,
.pp-img-protect {
  border:solid 0px #fff;
  margin-top: 8px;
  margin-bottom: 8px;
}

To override this, just add this rule:

.promo_slider_wrapper img {
  margin: 0;
}

Thanks Micah!! This post helped me so much! I am using the Rustic Theme, and the code that helped me was:

div.promo_slider .panel { background: none; }

at the end of the stylesheet.css file. I too will be sending a donation for this awesome plugin! Thanks for the support!!!

Hi Micah,

I have set the sliders width and height according to the featured images
dimensions, I have also set the slider options for “default image” as full and all my images are exactly the same dimensions. However, the slider still has gray area on the right of the featured images, making it look like the images do not take up the entire space defined.

I am using Genesis with the Lifestyle Child Theme at

https://legends-legacies.com

Thank you for your help!

Hi Again Micah,

I added to my CSS, see below, which simple makes the gray area on the right disappear, but the slider is still uneven. Look at the placement of the arrow links on either side of the slider. The problem isn’t really solved. I still want to remove the extra space on the right side.

div.promo_slider .panel {
background: none;

I am using Genesis with the Lifestyle Child Theme at

https://legends-legacies.com