make bootstrap column non-responsive and add horizontal scool bar to it

Question

i have done responsive webdesign a-lot that i cant simply remember how to make a div non-resposnive.

here is what my design looks like

when i take it to mobile it resizes, i don't want it to resize i want it to have a long width with an horizontal scroll bar.

here is my code sample.

<?php function acardio_big_grid_3() {
?>
<div class="row"><div class="clearfix eight-small-grid-contoler">
<div class="the-content-cat-bt" style="padding-bottom: 10px;">  <a class="tiptipBlog" title="Latest Post">Best Smartphone 2017</a> </div>


<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('post_type' => 'post', 'posts_per_page' => 8, 'paged' => $paged);
$query = new WP_Query($args);
if( $query->have_posts() ) :
while( $query->have_posts() ) : $query->the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
<div class="all-eight-small-grid-thumbs">
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>

 <?php elseif ($count == 2) : ?> 
 <li class="the-big-list">
 <div class="eight-small-grid-thumbs">
 <div class="the-main-featured-image-responsive">
 <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>



<?php elseif ($count == 3) : ?> 
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>

<?php elseif ($count == 4) : ?> 
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>


<?php elseif ($count == 5) : ?> 
<li class="the-big-list">

<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>


<?php elseif ($count == 6) : ?> 
<li class="the-big-list">

<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>
</div>
</div>
</div>


<?php else : ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php
}
add_shortcode( 'acardio-big-grid-3', 'acardio_big_grid_3' );
?>

please what do i do to make sure it doesn't break on mobile like this

instead to be long and have a scroll bar. Like this

Appears to be a duplicate http://stackoverflow.com/questions/17935601/how-to-remove-responsive-features-in-twitter-bootstrap-3 — sn3ll, Mar 30 '17 at 18:43

score 0 · Answer 1 · answered Mar 30 '17 at 18:17

To get the side scrolling, you can set overflow-y: auto so if the contents inside of the container are wider then the container, you'll get the side scrolling you're looking for.

#container {
  border: 1px solid red;
  width: 350px;
  overflow-y: auto;
}

#inner {
  width: 620px;
}

article {
  display: inline-block;
  background-color: #ccc;
  width: 200px;
  height: 200px;
}

<div id="container">
  <div id="inner">
    <article></article>
    <article></article>
    <article></article>
  </div>
</div>

make bootstrap column non-responsive and add horizontal scool bar to it

1 Answers1