CODEWITHSUNDEEP
htmlcssscroll
Felicyia
Felicyia

Reputation: 139

css horizontal scroll query

so i'm trying to have a horizontal scroll for a menu div for mobile and i'm using http://jsfiddle.net/v2Ypj/ and it seemed fairly straight forward so i used

.submenu .right.horizontal {
  height:160px;
  width: 700px !important;
  overflow-x: scroll !important;
  overflow-y: hidden;
  white-space: nowrap;
}

it worked scrolling only that div vertically (till i figured out i needed to change the width) but for some reason it won't work horizontally. the bar doesn't even show up. here's the website i'm testing on. http://www.embroiderywear.com/test/responsivetest/index2.html any help would appreciate any help!

Upvotes: 0

Views: 190

Answers (2)

Manish Khatri
Manish Khatri

Reputation: 161

you can try this one, hope this will help

http://jsfiddle.net/vUEYG/

HTML

<div id="containersimg">
    <div id="wrapper">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</div>

CSS

#wrapper {
    width: 500px;
    height: 110px;
}

#containersimg {
   background-color: #bbb;
   width: 300px;
   height: 135px;
   overflow-x: scroll;
}

.square {
   background-color: #00b;
   float: left;
   height: 90px;
   width: 90px;
   margin: 5px;
}

Upvotes: 0

jleggio
jleggio

Reputation: 1286

I played around in the inspector and came up with this solution:

.submenu .right.horizontal {
  width: 100% !important;
  padding-left: 0px;
}

.submenu .right a {
  display: inline-block;
  float: none;
}

Your width was set to a hard pixel amount (700px). By setting the width to 100% it allows the content to overflow properly. The styles for the A tag pervents your links from wrapping, hence making the area scrollable.

I would suggest putting the above styles in a media query.

Upvotes: 1

Related Questions