CODEWITHSUNDEEP
htmlcssmedia-queries
Mostafa Eslami
Mostafa Eslami

Reputation: 137

How to eliminate unwanted horizontal scroll-bar on re-sizing window by media queries?

i have problem with this code and the problem is that before 1200px everything is OK but after re-sizing to 1200px and more ( before width of scroll bar, for example chrome scroll-bar width is 17px ) before 1218px, we will see unwanted horizontal scroll-bar annoying us.

i want to solve this problem but i don't know how. anybody knows how? so please guide me.

link of my codes and online test:
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100


my html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<div class="header">
    <div class="inner-header">header</div>
</div>

<div class="body">body</div>

<div class="footer">
    <div class="inner-footer">footer</div>
</div>

</body>
</html>

my css:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: white;
    font-size: 30px;
    text-align: center;
}

body{
    background-color: orange;
}

.header{
    border-bottom: 1px solid black;
}

.inner-header{
    background-color: black;
}

.body{
    height: 3000px;
    background-color: blue;
}

.footer{
    border-top: 1px solid black;
}

.inner-footer{
    background-color: green;
}

.header,
.footer{
    width: 100%;
    height: 100px;
}

.inner-header,
.inner-footer{
    height: 100%;
}

.inner-header,
.body,
.inner-footer{
    width: 1000px;
    margin: 0 auto;
}

@media screen and (min-width: 1200px){
    .inner-header,
    .body,
    .inner-footer{
        width: 1200px;
    }
}

Upvotes: 3

Views: 4960

Answers (6)

Danish
Danish

Reputation: 1497

I know it a old question. but i had like to share this, Hopping someone will find it useful and will save someone's day.

So, There is no quick way, You will have to do some digging and find yourself the element which is causing overflow. Thus, creating unwanted horizontal scroll and pain in your ass. Normally one way would be to just write

body {
  overflow-x: hidden;
}

and hope that overflow-x on body will remove that horizontal scroll bar but some times you have to apply overflow:hidden to you main container of the site. Which likely works all the time or most of the times. like,

.main_container {
  overflow: hidden;
}

There are some tricks that can help you find those overflow elements such as using below JavaScript script, just open console and execute it there

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

OR you could execute jQuery one,

$.each( $('*'), function() { 
    if( $(this).width() > $('body').width()) {
        console.log("Wide Element: ", $(this), "Width: ", $(this).width()); 
    } 
});

or you can use this little jquery snippet. It will logging out the elements directly in console along the elements width, which can help you to easily highlight them on hover in your console (at least in Chrome).

 $.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;

or if you still can't find that particular element use this below trick,

//Open inspector -> “New Style Rule”:
    * {
        outline: 1px solid red;
    }

You can always add: opacity: 1 !important; visibility: visible !important; if you think you might have a hidden element but usually the above works without extra effort.

Hope it helps someone. Happy digging.

Upvotes: 3

Mostafa Eslami
Mostafa Eslami

Reputation: 137

i solve it very easy. if you define min-width media queries = width + scroll-bar width ( for example in chrome is 17px or in opera is 15px but for sure we say 20px ) the problem will be solve.

new link of code:

codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100

Upvotes: -1

Beck
Beck

Reputation: 104

You could solve this in quite a few ways - one of which is changing your width: 1000px to max-width: 1000px

Another might be simply styling / hiding the scroll bar with some -webkit prefixes. Wouldn't recommend this route for multiple UX reasons but if you want to read up on styling scrollbars - check out this resource.

Lastly you could specifically target the x-axis scroll bar with overflow-x and remove / hide it by setting this to hidden. Again - this method is not the best. How would a user know content is off the page without the scroll bar?

Upvotes: 0

Vasilis Tsirimokos
Vasilis Tsirimokos

Reputation: 204

You can change your .inner-footer from width: 1000px to max-width: 1000px; and that will fix the issue.

Upvotes: 1

Gamsh
Gamsh

Reputation: 545

Here you change code like that. overflow-x: hidden; is hidden the horizontal scroll bar.

body{
background-color: orange;
overflow-x: hidden;
overflow-y: scroll;
}

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115100

I can't really recommend it but you can use overflow-X:hidden on the body element (not the element with a class of .body*). It's not as though you need to see anything outside of the sides of your container anyway...right?

* you should really not use that name for a class, it's unnecessarily confusing.

@media screen and (min-width: 1200px) {
  body {
    overflow-X: hidden;
  }
  .inner-header,
  .body,
  .inner-footer {
    width: 1200px;
  }
}

Ideally, you should adjust the design to allow for this though. Different browsers treat the scrollbars differently when it comes to calculating the viewport width.

Codepen Demo

Upvotes: 1

Related Questions