CODEWITHSUNDEEP
htmlcssscrollbar
ofg
ofg

Reputation: 63

How to get rid of horizontal scroll bar when shrinking window?

Using the HTML and CSS below, you'll notice that rather than shrinking to fit the browser window, the site gets a horizontal scroll bar when shrunk down to 189px width. I've gone through my code and I cannot seem to figure out why this is happening. Keep in mind I'm a newbie so I might very well have overlooked something.

Also, I have a bonus question if that is allowed: I want to shrink the menu height but it seems impossible. How would you go about it?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title></title>
  </head>
  <body>
    <div class="wrapper">
      <div class="header">
        <h1>Title</h1>
      </div>
      <div class="menu">
<a href="#">about</a> <br>
<a href="#">contact</a> <br>
<a href="#">donate</a> <br>
      </div>

      <div class="pic">
<img src="roshi.jpg" alt="roshi">
      </div>
      <div class="content">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="content2">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="footer">
Footer
      </div>
    </div>
  </body>
</html>

html body {
  margin: 0 auto;
  font-family: "Raleway", sans-serif;

}

.wrapper {
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
  "header"
  "menu"
  "pic"
  "content"
  "content2"
  "footer";
}


.header {
  grid-area: header;
  background-color: lightgrey;
}

.header h1 {
  margin-left: 0;
  padding-left: 0;
}
.menu {
  grid-area: menu;
  padding: 0;
  line-height: 2;

}
.menu a {
  text-decoration: none;

}
.menu a:link {
  color: black;
}
.pic {
  grid-area: pic;

}

img {

  width: 100%;
  height: auto;
}
.content {
  grid-area: content;

}
.content2 {
  grid-area: content2;
}
.footer {
  grid-area: footer;
  background-color: lightgrey;

}

.wrapper > * {
  margin: 0px 30px;
}
.header, .footer {

  padding: 0px 30px;
}


@media screen and (min-width: 500px) {
.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 1fr 1fr;
grid-template-areas:
"header header"
"menu menu"
"pic pic"
"content content2"
"footer footer";
}
.menu {
  display: flex;
  flex-direction: row;
  margin-left: auto;
}
.menu a {
  padding-right: 10px;

}
}

JSFiddle link: https://jsfiddle.net/tzrqf5np/

Upvotes: 0

Views: 96

Answers (1)

tacoshy
tacoshy

Reputation: 13001

I fixed your CSS as you wanted. You really should start making sure you get your spacings right. it has no direct influence in HTML and CSS but helps reading and is a good practise for other languages. There plently languages where spacings make a difference if a code works or not. But having it easier to read espacially with programs like Visual Studio Code the advantage is that you see which closing tags belong to which starting tag. Please try to practice it for me "my little padawan" :P

Ok One change of formatting was to the media query:

@media only screen
  and ...
  and ... {
    body {
      random-code: xy;
    }
}

espacilly if you use media query to adress screens use only screen. Even it works nearly always take it as a good habit same as getting your spacings right. Then get a new line with and... what every you want to use. you can combine that way many rules like min-width and max-width, orientation: landscape/portrait screen format...

then you used: grid-template-rows: 1fr 1fr; I switched it to grid-template-columns: 1fr 1fr; and added the grid-auto-rows: auto; and tada: its working. The menu is way smaller just like you wanted.

Next the picture got a width of auto. that way it shouldnt create a horizontal scrollbar. a width of 100% will as it will add the 100% to the margin and paddings on top and then the width is wider then the screen.

html body {
  margin: 0 auto;
  font-family: "Raleway", sans-serif;
}

.wrapper {
  margin: 0 auto;
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 10px;
  grid-template-areas:
  "header"
  "menu"
  "pic"
  "content"
  "content2"
  "footer";
}


.header {
  grid-area: header;
  background-color: lightgrey;
}

.header h1 {
  margin-left: 0;
  padding-left: 0;
}
.menu {
  grid-area: menu;
  padding: 0;

}
.menu a {
  text-decoration: none;
}

.menu a:link {
  color: black;
}

.pic {
  grid-area: pic;
}

img {
  width: 100%;
  height: auto;
}

.content {
  grid-area: content;
}

.content2 {
  grid-area: content2;
}

.footer {
  grid-area: footer;
  background-color: lightgrey;
}

.wrapper > * {
  margin: 0px 30px;
}

.header, .footer {
  padding: 0px 30px;
}

@media only screen 
  and (min-width: 500px) {
    .wrapper {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: auto;
      grid-template-areas:
        "header header"
        "menu menu"
        "pic pic"
        "content content2"
        "footer footer";
    }
    
    .menu {
      display: flex;
      flex-direction: row;
      margin-left: auto;
    }

    .menu a {
      padding-right: 10px;
    }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title></title>
  </head>
  <body>
    <div class="wrapper">
      <div class="header">
        <h1>Title</h1>
      </div>
      <div class="menu">
        <a href="#">about</a><br>
        <a href="#">contact</a><br>
        <a href="#">donate</a>
      </div>
      <div class="pic">
        <img src="roshi.jpg" alt="roshi">
      </div>
      <div class="content">
        <h1>Article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h1>Article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="content2">
        <h1>Article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h1>Article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions