WordPress.org

Ready to get started?Download WordPress

Forums

Promotion Slider
unable to span promo slider 100% (10 posts)

  1. tonka_toys
    Member
    Posted 8 months ago #

    Hi
    as per screen shot I'm unable to span the promo-slider 100% to region.

    I have tried various css coding , however I cannot get the image to span across

    the original image size is 1920 × 1200

    here is the css I have tried to use to hack the slider

    #promo-wide {
    margin-left:-64px;
    padding-left:24px;
    padding-right: 0px;
    width: 100%;
    }

    .promo_slider {
    width: 2000px; !important;
    }

    here is the code to display the slider in the header:

    </nav><!-- #site-navigation -->

    <div id="promo-wide">
    <?php echo do_shortcode('[promoslider width="100%"]'); ?>

    </div>

    </header><!-- #masthead -->

    <div id="main" class="wrapper">

    Please help.

    Thanks!

    http://wordpress.org/plugins/promotion-slider/

  2. tonka_toys
    Member
    Posted 8 months ago #

  3. Micah Wood
    Member
    Plugin Author

    Posted 8 months ago #

    By default, the slider should go 100% width. So you either have some margin or padding in one of the containing elements, or your image just isn't that large.

    Screenshots and HTML markup only tell a small portion of the story. I'd be glad to look at the URL where the slider is and tell you exactly what is going wrong and how to fix it.

  4. tonka_toys
    Member
    Posted 8 months ago #

    Hi. Thanks for your reply.the url is handytherapies .co.uk
    Would much appreciate if u could take a look. Regards

  5. Micah Wood
    Member
    Plugin Author

    Posted 8 months ago #

    The theme you are using has left and right padding on the #page element that is set using REMs. What you want to do is this:

    Remove your existing styling from the #promo-wide element:

    #promo-wide {
        margin-left: -64px;
        padding-left: 24px;
        padding-right: 0px;
        width: 100%;
    }

    Replace with this:

    #promo-wide {
        margin-right: -2.857142857rem;
        margin-left: -2.857142857rem;
    }

    NOTE: Once you've done this, the slider will appear to be aligned to the left. In reality, it is not... you image is just 960px wide and not 1040px.

  6. tonka_toys
    Member
    Posted 8 months ago #

    Hi. thanks for your prompt reply.
    do you know why it would be rendering the image as 960px wide instead of 1024 ? when you inspect the image URL, it's original size is in fact 1024px wide. I cannot see any parameters to control the width

    http://www.handytherapies.co.uk/wp-content/uploads/2013/12/bg-1024x640.jpg

    I cannot see any settings on promotion slider on image dimensions.

    Unless it is wordpress resizing the image on the fly?

    <img width="960" height="600" src="http://www.handytherapies.co.uk/wp-content/uploads/2013/12/bg-1024x640.jpg" class="attachment-large wp-post-image" alt="bg.jpg">

  7. Micah Wood
    Member
    Plugin Author

    Posted 8 months ago #

    Be sure that the image size in the Promotion Slider options is set to 'full size'.

    What could be happening is that your theme is applying a filter and adjusting the image width / height so that it doesn't extend beyond the max width of 960 that the theme design expects. That is just a theory, but I've seen several themes that do this type of thing.

    If you insert the same full-size image directly into a post, do the image dimensions get altered the same?

    If you switch to another theme, does the image size increase?

  8. bamgraphics
    Member
    Posted 3 months ago #

    The slider has been working for me all along - Now, after months, I just uploaded a new slide and it created a gap between the promo and the slide.

    I tried a png with transparency also - the grey background also shows through. This may give a clue as to why it is happening.

  9. Micah Wood
    Member
    Plugin Author

    Posted 3 months ago #

    @bamgraphics,

    Any details you can provide would help myself or others help you solve your issue. A link to the page where you are having the problem would be ideal...

    It sounds like you may just need to add a CSS rule to remove the grey background.

  10. bamgraphics
    Member
    Posted 3 months ago #

    Literally just figured it out.

    Had to uncheck "Add this image to" on the "Set Featured Image" page.

    Wow - timing.

    Thanks anyway.

Reply

You must log in to post.

About this Plugin

About this Topic