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
: 2928 At:- 12/12/2017 3:04:39 PM
html css horizontal scroll not working



add comment to question



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


comment to above answer

Patreon Become a Patron


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

Related Articles
3487
6 Things to improve your google ranking using simple SEO tips
4290
Importance of Structuring URLs for SEO
4726
How to create responsive Bootstrap Nabvar
8376
Export html table to excel using jQuery / Javascript
3802
Bootstrap Tutorial (Part-2)

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly


Related Questions