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

Community Forums Forums General Discussion Outreach-Slider: How to remove extra white space on right side

This topic is: not resolved

Tagged: ,

This topic contains 6 replies, has 6 voices, and was last updated by  clayteller 10 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #16694

    Linda Muller
    Participant
    Post count: 5

    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!

    • This topic was modified 1 year, 5 months ago by  Linda Muller.
    • This topic was modified 1 year, 5 months ago by  Linda Muller.
    #16703

    SoZo
    Moderator
    Post count: 1573

    Thanks for sharing :)


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

    #23224

    kathiemt
    Participant
    Post count: 108

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


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    #23385

    Linda Muller
    Participant
    Post count: 5

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

    #52450

    Femme-fatale
    Participant
    Post count: 7

    i tried this….sadly it did not work for me :(

    http://www.mountzioncog.com

    #52466

    frapster
    Participant
    Post count: 2

    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.

    #63601

    clayteller
    Participant
    Post count: 2

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.