Slider overflow div container in IE and Firefox

  • Resolved Many Thanks

    (@willcrosthwait)


    9 years, 2 months ago

    Hi All,

    Finishing a site that I’m looking to launch this week but have one final issue which is killing me!

    If you view the homepage for https://www.countryfi.com in Safari or Chrome the slider is positioned perfectly.

    In IE and Firefox it’s not fitting within the div container and cuts the nav bar in half.

    Anyone have any ideas?

    Badly need saving!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Many Thanks

    (@willcrosthwait)

    Anyone?

    Thread Starter Many Thanks

    (@willcrosthwait)

    Here’s the CSS that I’m using:

    /*
    Topbar menu styling
    */
    .sub-menu {
    font-size: 10px;
    padding-top: 10px;
    float: right;
    width: 100px;
    }

    /*
    Metaslider styling
    */
    .metaslider {
    margin: 0;
    padding: 0;
    float: top;
    clear: both;
    }

    /*
    Header Height
    */
    .home header#masthead hgroup {
    margin: 0;
    height: 0;
    float: top;
    clear: both;
    }

    .home header#masthead.site-header {
    margin: 0;
    height: 0;
    padding: 0;
    float: top;
    clear: both;
    }

    /*
    Cart Float
    */
    a.cart-contents {
    float: top;
    clear: both;
    }

    /*
    Logo Float
    */
    .home a.site-logo-link {
    float: top;
    clear: both;
    margin: 0;
    height: 0;
    padding-right: 20px;
    }

    And here’s the PHP:

    /**
    Add meta slider to header
    */

    add_action( ‘init’, ‘child_theme_init’ );
    function child_theme_init() {
    add_action( ‘storefront_before_content’, ‘woa_add_full_slider’, 5 );
    }

    function woa_add_full_slider() {

    if ( is_front_page() ) :
    ?>
    <div id=”slider”>
    <?php echo do_shortcode(“[notdevice][metaslider id=591 percentwidth=100][/notdevice]”); ?>
    </div>
    <?php
    endif;
    }

    Thread Starter Many Thanks

    (@willcrosthwait)

    Any ideas?

    Thread Starter Many Thanks

    (@willcrosthwait)

    Fixed it by adding

    .site-header {
    float: left;
    width: 100%;
    }

    Thanks to Dave at Metaslider for sorting it

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Slider overflow div container in IE and Firefox’ is closed to new replies.

Tags