how prevent horizontal scroll in bootstrap and list?

Question

I have a responsive UL List , many Li ImageItem and span are in this Ul. on maximize size 3 item shows in one row and when I resize ( small) my browser, 2 item shows and it works fine. But in smallest size of my browser horizontal scroll appear :( 1 item shows but scroll appear, how I can prevent horizontal scroll?! this is my css :

.myUl {
    font-size:large !important;
    color:#373636 !important;
    text-align:center !important;
}
.myUl li {
    width:350px !important;
}
.myUl li:hover {
    background:rgba(0, 0, 0, 0.2) !important;
}
.myUl li img {
    height:170px !important;
    width:100px !important;
}
.myUl li span {
    float:right !important;
    width:170px;
    padding-right:8px !important;
    padding-top:10px !important;
    text-align:right !important;
    vertical-align:middle !important;
    line-height: 1.5em !important;
}
ul.img-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul.img-list li {
    display: inline-block;
    height: 180px;
    margin: 0 1em 1em 0;
    position: relative;
    width: 150px;
}
ul.img-list li:hover span.text-content {
    opacity: 1;
}

this is my Index.cshtml

<div>
    <ul class="img-list myUl">
        <li>
            <span>
                some text here
            </span>
            <span style="float: left !important; padding-top: 3px !important;">
                <a>
                    <img class="img-responsive img-circle img-thumbnail" src="~/Images/MenuImages/z.jpg"  />
                </a>
            </span>
        </li>
        <li>
           .........
        </li>
  </ul>

an image of my page

Which element is causing the scrolling? Inspect the element and let me know :) — Jay Welsh
– Jay Welsh, Commented Nov 23, 2015 at 6:07
can you please share any jsfiddle or working demo where we can see issue in live? that will help..thanx — Leo the lion
– Leo the lion, Commented Nov 23, 2015 at 6:09
really I don't know which element causing this , I changes every thing but still scroll appear — shima amini
– shima amini, Commented Nov 23, 2015 at 6:18

RyanM · Accepted Answer · 2015-11-23 06:23:05Z

3

To prevent horizontal scrolling just add this to your body tag in Css like such :

body {
    overflow-x: hidden;
}

Hope this helped

answered Nov 23, 2015 at 6:23

RyanM

7616 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RyanM Over a year ago

No problem glad I could help @shimaamini

asp · Accepted Answer · 2020-01-17 04:36:21Z

0

Your following code may leads to horizontal scrolling when screen width is going less than 360px,

.myUl li {
  width:350px !important;
}

When the browser size goes below 350px your browser will shows a horizontal scrollbar If u need to overcome this issue you are required to write a media query for this, Like the following:

@media only screen and (max-width: 360px) {
  .myUl li {
      width:100% !important;
  }
}

also u can be use the property body { overflow-x: hidden; }

edited Jan 17, 2020 at 4:36

answered Nov 23, 2015 at 6:15

asp

7552 gold badges11 silver badges32 bronze badges

2 Comments

shima amini Over a year ago

Thanks , myUL li is the reason , when I remove this css , Horizonatl scroll not appear . I insert you Media code but it doesn't work and horizonatll scrool appear :/

asp Over a year ago

ok then you are required to add an body{overflow-x:hidden}. This works fine.

Collectives™ on Stack Overflow

how prevent horizontal scroll in bootstrap and list?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related