Outreach-Slider: How to remove extra white space on right side

[Linda Muller]

After hours of tweaking with the CSS and testing numerous Slider plugins I figured out how to remove the white space from the right side of the slider.  Here's how I finally did it:

Change the width of your slider/images from 1040px to 1060px

The Outreach README states:

FEATURED IMAGES
By default WordPress will create a default thumbnail image for each image you upload and the size can be specified in your dashboard under Settings > Media. In addition, the Outreach child theme creates the following thumbnail images you'll see below, which are defined (and can be modified) in the functions.php file. These are the recommended thumbnail sizes that are used on the Outreach child theme demo site.

featured - 1040px by 400px
home-sections - 215px by 140px
sidebar - 300px by 150px

So I originally put my image width at 1040px.

I tried numerous CSS tweaks to remove the white space from the right side of the slider.

The original CSS has this:

.wrap {
margin: 0 auto;
width: 1060px;
}

I figured changing it to the width of 1040px [which is stated in the README] would fix it. That really threw my site off and aligned everything left.

So the easiest thing to do until the README or the CSS is corrected is to change the width to 1060px for the slider/images.

BTW - I found a great slider on the WP site: Cyclone Slider. It has good reviews and seems fairly lightweight considering the number of options.

Hope this helps!

[SoZo]

Thanks for sharing 🙂

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[kathiemt]

Just to clarify, you're saying you changed the width to 1060 in the slider settings?

---

Kathie Thomas

[Linda Muller]

Yes, make the width 1060 in the slider settings.   Hope that helps!

[Femme-fatale]

i tried this....sadly it did not work for me 🙁

http://www.mountzioncog.com

[frapster]

Femme-fatale - after looking at your site there are two options I'd pursue for eliminating the extra white space in your slider.

The first illustrates the real problem - your image is too narrow for the specified size of your space.

.wrap {
margin: 0 auto;
width: 910px;
}

The above change messes up your layout. So alternatively I'd change the width of your images to 1020px (or whatever best fits your space). I just guestimated the width.

Hope that helps.

[clayteller]

This issue was bothering me also. I seemed to have success making the following change in style.css.

Original rule:

.full-width-content #content,
.full-width-content.outreach-landing #content {
	box-sizing: border-box;
	width: 100%;
}

New rule:

.full-width-content #content,
.full-width-content.outreach-landing #content {
	box-sizing: border-box;
	width: 1040px;
}

I think this is what's going on: There is a 10px padding on this block (inherited from another rule) which when added to 100% width makes the block larger than intended (1080px). Setting the block to width 1040px results in the correct 1060px width.

[Author]

Posts