Horizontal scroll is not working in mobile view


I am using this code, which has width and overflow defined but when in mobile view or you can say in low resolution screen, horizontal scroll is not working, here is my current code

<div style="width:900px; overflow:scroll">

    <div class="row bs-wizard" style="border-bottom:0;">
       
        <div class="col-xs-2 bs-wizard-step " data-id="Order">
            <div class="text-center bs-wizard-stepnum ">Order</div>
            <div class="progress"><div class="progress-bar"></div></div>
            <a href="javascript:void(0)" class="bs-wizard-dot"></a>
            <div class="bs-wizard-info text-center">Any Details here</div>
        </div>
<!--More similar code-->
        <div class="col-xs-2 bs-wizard-step " data-id="Sign Paper Work">
            <!-- complete -->
            <div class="text-center bs-wizard-stepnum">Sign Paper Work</div>
            <div class="progress"><div class="progress-bar"></div></div>
            <a href="javascript:void(0)" class="bs-wizard-dot"></a>
            <div class="bs-wizard-info text-center">Any Details here</div>
        </div>
<!--More similar code-->
      
    </div>
</div>

when in mobile view i am not able to scroll and see remaining div's here is the mobile image

mobile-view-horizontal-scroll-not-working-min

cannot scroll more on right side, here is the Desktop view

desktop-view-horizontal-scroll-issue-min

how to make scroll working for low resolution using HTML/CSS?


Asked by:- Sam
0
: 521 At:- 12/12/2017 3:04:39 PM
html css horizontal scroll not working






1 Answers
profileImage Answered by:- bhanu

Horizontal scroll will work when you will place an outside <div> with scroll and inner <div> with width, so your code must be

<!--Outer div with scroll-->

<div style=" overflow:scroll">

<!--Inner div with width-->
    <div class="row bs-wizard" style="border-bottom:0; width:900px;">
       
        <div class="col-xs-2 bs-wizard-step " data-id="Order">
            <div class="text-center bs-wizard-stepnum ">Order</div>
            <div class="progress"><div class="progress-bar"></div></div>
            <a href="javascript:void(0)" class="bs-wizard-dot"></a>
            <div class="bs-wizard-info text-center">Any Details here</div>
        </div>

        <div class="col-xs-2 bs-wizard-step " data-id="Sign Paper Work">
            <!-- complete -->
            <div class="text-center bs-wizard-stepnum">Sign Paper Work</div>
            <div class="progress"><div class="progress-bar"></div></div>
            <a href="javascript:void(0)" class="bs-wizard-dot"></a>
            <div class="bs-wizard-info text-center">Any Details here</div>
        </div>

      
    </div>
</div>

take a look at working fiddle here

2
At:- 12/13/2017 6:34:25 AM
Thanks, yes i saw that, we need to give overflow property to outer div and width to inner div 0
By : Sam - at :- 12/15/2017 7:34:48 AM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use