Содержимое во вложенных вкладках не отображается полностью на 100% ширины

Question

Я настроил вложенные вкладки, но содержимое внутри второго набора вкладок (#tab-2-1, #tab-2-2, #tab-2-3) не растягиваются на полную ширину 100%. Я что-то пропустил?

HTML

<ul class="tabs">
    <li><a href="#tab1">Bonus Episodes</a></li>
    <li><a href="#tab2">Videos</a></li>
</ul>
<div id="tab1" class="tab_content">
    <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/44386375%3Fsecret_token%3Ds-bi246&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
</div>
<div id="tab2" class="tab_content">
    <ul class="tabs">
        <li><a href="#tab2-1">Foreally Stream</a></li>
        <li><a href="#tab2-2">Ross</a></li>
        <li><a href="#tab2-3">Jude</a></li>
    </ul>
    <div id="tab2-1" class="tab_content">
        [videogallery id="video-stream"]
    </div>
    <div id="tab2-2" class="tab_content">
        [videogallery id="ross"]
    </div>
    <div id="tab2-3" class="tab_content">
        [videogallery id="jude"]
    </div>
</div>

CSS

.tab_content { 
  background:#000;
  color:#fff;
  max-width:500px;
  padding:10px 
}
.tabs li { 
  display:inline;
  list-style:none 
}
.tabs a { 
  background:#7c7c7c;
  border-radius:5px 5px 0 0;
  color:#dadada;
  display:inline-block;
  font-size:2em;
  padding:10px 15px 8px;
  text-decoration:none 
}
.tabs a.active { 
  background:#e32d2d;
  color:#fff 
}
#tab2 ul.tabs a { 
  background:transparent;
  color:#999;
  padding:10px 10px 0 10px 
}
#tab2 ul.tabs a.active { 
  color:#fff 
}

JS

jQuery('ul.tabs').each(function(){
    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, $links = jQuery(this).find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = jQuery($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');

    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function () {
        jQuery(this.hash).hide();
    });

    // Bind the click event handler
    jQuery(this).on('click', 'a', function(e){
        // Make the old tab inactive.
        $active.removeClass('active');
        $content.hide();

        // Update the variables with the new link and content
        $active = jQuery(this);
        $content = jQuery(this.hash);

        // Make the tab active.
        $active.addClass('active');
        $content.show();

        // Prevent the anchor's default click action
        e.preventDefault();
    });
});

Answer 1

В вашем CSS:

.videogallery .sliderMain {
    width: 100%!important;
}

.videogallery .sliderMain получает встроенный стиль шириной 100 пикселей.

Что бы ни создавало разметку с помощью шорткода [videogallery] (возможно, плагин WordPress?), Она имеет ширину 100 пикселей. Вы можете либо переопределить это в своем CSS (с помощью вышеупомянутого), либо вы можете дополнительно изучить, как он вычисляет 100px, копаясь в JS/CSS для плагина видеогалереи.

Надеюсь, это поможет.