Community Forums › Forums › Archived Forums › General Discussion › Outreach-Slider: How to remove extra white space on right side
- This topic has 6 replies, 6 voices, and was last updated 10 years, 6 months ago by clayteller.
-
AuthorPosts
-
January 31, 2013 at 12:18 am #16694Linda MullerMember
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 150pxSo 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!
January 31, 2013 at 1:00 am #16703SoZoMemberFebruary 27, 2013 at 8:35 pm #23224kathiemtParticipantJust to clarify, you're saying you changed the width to 1060 in the slider settings?
Kathie Thomas
February 28, 2013 at 4:50 pm #23385Linda MullerMemberYes, make the width 1060 in the slider settings. Hope that helps!
July 25, 2013 at 9:53 am #52450Femme-fataleMemberi tried this....sadly it did not work for me 🙁
July 25, 2013 at 12:05 pm #52466frapsterMemberFemme-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.
September 20, 2013 at 6:47 pm #63601claytellerMemberThis 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.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.