MIke MIke - 3 months ago 36
CSS Question

master slider resize to row container

im trying to resize my slider width to max it with my row but it always have an allowance on both sides so I cant maximize the slider size to my row.

here is the html

<body <?php body_class(); ?>>

<div class="row container">
<header role="banner" id="top-header">
<div class="twelve columns" style="background: transparent;" >



<div class="twelve columns text-center" style="background: transparent;">
<a href="http://fabioide.com/frederiksminde/velkommen"><img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/09/fredlogo.png" alt="Hotel Frederiksminde Logo"></a>
</div>

<div class="twelve columns text-center" style="background: transparent;">
<div class="menuimg">
<img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/10/menu.jpg" alt="Mobile Menu">
</div>
<div id="navcontainer">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => false, 'theme_location' => 'header-menu' ) ); ?></div>
</div>

<?php echo do_shortcode('[google-translator]'); ?>





<?php bones_main_nav(); // Adjust using Menus in Wordpress Admin ?>

<div class="show-for-small menu-action">
<a href="#sidebar" id="mobile-nav-button" class="sidebar-button small secondary button">
<svg xml:space="preserve" enable-background="new 0 0 48 48" viewBox="0 0 48 48" height="18px" width="18px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1">
<line y2="8.907" x2="48" y1="8.907" x1="0" stroke-miterlimit="10" stroke-width="8" stroke="#000000" fill="none"/>
<line y2="24.173" x2="48" y1="24.173" x1="0" stroke-miterlimit="10" stroke-width="8" stroke="#000000" fill="none"/>
<line y2="39.439" x2="48" y1="39.439" x1="0" stroke-miterlimit="10" stroke-width="8" stroke="#000000" fill="none"/>
</svg>
</a>

</div>

<?php bones_mobile_nav(); ?>
<div class="row">
<div class="slider">
<?php masterslider(1); ?>
</div>
</div>

</header> <!-- end header -->


my css is for foundation 5 wordpress
and for the width of the slider - http://prntscr.com/4vo2tl

Answer

I change my structure to this and move my header inside my row container inside the content.

<body <?php body_class(); ?>>

        <div class="row container">
            <header role="banner" id="top-header">
<div class="twelve columns" style="background: transparent;" >  


<section class="twelve columns text-center" style="background: transparent;">
<a href="http://fabioide.com/frederiksminde/velkommen"><img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/09/fredlogo.png" alt="Hotel Frederiksminde Logo"></a>
</section>

<section class="twelve columns text-center" style="background: transparent;">
<div class="menuimg">
<img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/10/menu.jpg" alt="Mobile Menu">
</div>
<div id="navcontainer">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => false, 'theme_location' => 'header-menu' ) ); ?></section>


<?php echo do_shortcode('[google-translator]'); ?>

</div>
<div class="twelve columns" style="background: transparent;" >  
    <div class="slider">
<?php masterslider(1); ?>
</div>

</div>
</div>

                </header> <!-- end header -->

Header inside content from this

<?php get_header(); ?>
<div class="row" style="box-shadow: 0 3px 0px 0px #888888,  7px 0 7px -4px #888888, -7px 0 7px -4px #888888;">
        <div id="content">
                <div class="twelve columns clearfix">

to this

<div class="row" style="box-shadow: 0 3px 0px 0px #888888,  7px 0 7px -4px #888888, -7px 0 7px -4px #888888;">
<?php get_header(); ?>
        <div id="content">
                <div class="twelve columns clearfix">