CODEWITHSUNDEEP
htmlcssresponsive-design
ofg
ofg

Reputation: 69

Site is way too wide in screen-mode

I'm a newbie trying to build a site with a responsive design. The design looks absolutely fine when it's scaled down below 500px for mobile view, but when scaling up, the site for some reason becomes way too wide and I get a horizontal scroll bar. I've gone through my code and I see no reason why it would do that since I have a fixed margin set for the main wrapper div.

Can anyone tell me what I'm doing wrong?

Thanks a lot.

CSS


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


.wrapper {
  margin: 0 auto;
  display: grid;
  grid-gap: 20px 10px;
  grid-template-columns: 1fr;
  max-width: 70vw;
}

.wrapper > * {
  padding: 10px

}

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

#menuitem {
  display: inline;
  padding-right: 20px;

}
#menuitem a:link {
  color: black;
  text-decoration: none;
}

.article img {
  width: 56vw;
  height: 40vw;
  border: solid lightgrey 1px;
}
.article h2, p {
    width: 56vw;
    line-height: 1.5;
}

footer {
  border-top: 1px solid black;
  line-height: 1.5rem;
}
footer a:link {
  color: black;
  text-decoration: none;
}

@media screen and (min-width: 500px) {


section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px 20px;
}



section img {
  max-width: 20vw;
  max-height: 20vw;
}

}

<!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" href="food.css">
    <title> title | Home </title>
  </head>
  <body>
    <div class="wrapper">
<header>
<h1>title</h1>
</header>
<nav>
  <div id="menuitem"><a href="#">recipes</a></div>
  <div id="menuitem"><a href="#">guides</a></div>
  <div id="menuitem"><a href="#">blog</a></div>
</nav>
<section>
  <div class="article">
    <img src="https://pickledplum.com/wp-content/uploads/2020/01/vegan-napa-cabbage-kimchi-2-1360.jpg" alt="Vegan kimchi">

    <h2>Vegan kimchi</h2>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

  </div>
  <div class="article">
    <img src="https://www.weekendbakery.com/wp-content/uploads/sanfranciscosourdough.jpg" alt="Sourdough bread">
<h2>Classic sourdough bread</h2>
<p>Axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p>
  </div>
  <div class="article">
    <img src="https://www.delectabilia.com/wp-content/uploads/vegetarian-red-miso-ramen.jpg" alt="">
<h2>Vegetarian miso ramen</h2>
<p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p>
  </div>

</section>
<footer>
<div class="footersection">
<a href="#">recipes</a><br>
<a href="#">guides</a><br>
<a href="#">about</a><br>
<a href="#">contact</a><br>
</div>

</footer>


    </div>

  </body>
</html>

Upvotes: 0

Views: 571

Answers (2)

AbsoluteBeginner
AbsoluteBeginner

Reputation: 2255

My little suggestions:

  • try mobile-first approach;
  • use flexbox instead of grid (why grid-template-columns: 1fr;?);
  • use more than one breakpoint (like Bootstrap, for example).

Upvotes: 0

Numb3rs
Numb3rs

Reputation: 111

Avoid using width: 20vw;, use percentage like width: 20%. Your dummy text is way too long, so it doesn't break in the next line. Just google for lorem ipsum to get a more realistic dummy text :)

You can also flex the items, see this example: https://jsfiddle.net/41e9rm8o/ and this flex tutorial: https://sketchingwithcss.com/samplechapter/cheatsheet.html

Upvotes: 1

Related Questions