Search code examples
htmlcssflexboxwidthoverflow

Flexbox based site overflows content horizontally

The content of my site overflows on mobile displays. I have used Chrome Dev tools to see that. It uses the meta tag viewport set to initial-scale=1.0 and width=device-width, but no matter what I do it will overflow. What is the cause of that and how can I fix it?

body {
  height: 100%;
  margin: auto;
  max-width: 1000px;
}

hr {
  border: 0;
  border-radius: 25px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(251, 140, 0, 1), rgba(0, 0, 0, 0));
}

h1,
h2 {
  font-weight: 400;
  letter-spacing: 1px;
}

h3 {
  font-weight: 400;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.logo {
  order: -1;
  width: 20%;
}

.header {
  order: 0;
  text-align: right;
  text-transform: uppercase;
  width: 80%;
}

.header>h1 {
  margin-bottom: .07em;
  font-family: 'Mina', sans-serif, default;
}

.break-line {
  order: 1;
  width: 100%;
}

.main-image {
  height: auto;
  object-fit: contain;
  width: 100%;
}

.featured-work {
  margin: 1.5em auto;
  min-height: 150px;
  order: 3;
  width: 100%;
}

.featured-work>h2 {
  font-family: sans-serif, default;
  width: 100%;
}

.work {
  min-height: 50px;
  text-align: center;
  width: 31%;
}

.work>picture>img {
  height: auto;
  width: 100%;
}

.work>h3 {
  margin-top: .5em;
  text-transform: uppercase;
}

.work>a>p {
  margin-top: -0.8em;
}

.horizontal-break {
  width: 3.5%;
}

#main-image-container {
  order: 2;
}

@media screen and (max-width: 450px) {
  body {
    font-size: .9em
  }
  hr {
    height: 1px;
    margin-bottom: 5%;
  }
  .header {
    margin-top: -3%;
  }
  .header>h1 {
    margin-bottom: -0.5%;
  }
  .work>h3 {
    font-size: .8em;
  }
  .work>a>p {
    font-size: .6em;
    min-height: 45px;
    min-width: 45px;
  }
}

@media screen and (min-width: 451px) {
  body {
    font-size: 1em
  }
  hr {
    height: 2px;
    margin-bottom: 4%;
  }
  .work>h3 {
    font-size: .9em;
  }
  .work>a>p {
    font-size: .7em;
  }
}

@media screen and (min-width: 701px) {
  body {
    font-size: 1.25em
  }
  hr {
    height: 3px;
    margin-bottom: 3%;
  }
  .work>h3 {
    font-size: 1em;
  }
  .work>a>p {
    font-size: .8em;
  }
}

@media screen and (min-width: 1000px) {
  .work>h3 {
    font-size: 1.25em;
  }
}
<div class="container">

  <picture class="logo">
    <source media="(max-width: 450px)" srcset="img/logo_small.png">
    <source media="(max-width: 700px)" srcset="img/logo_medium.png">
    <img src="img/logo.png" alt="The logo of the site.">
  </picture>

  <header class="header">
    <h1>Chris Maris</h1>
    <p>Front-end Warrior</p>
  </header>

  <div class="break-line">
    <hr>
  </div>

  <picture id="main-image-container">
    <source media="(max-width: 450px)" srcset="img/main_image_small.jpg">
    <source media="(max-width: 700px)" srcset="img/main_image_medium.jpg">
    <img class="main-image" src="img/main_image.jpg" alt="A laptop in a desk with flowers.">
  </picture>

  <section class="featured-work container">

    <h2>Featured Work</h2>

    <div class="work">

      <picture>
        <source media="(max-width: 450px)" srcset="img/beach_small.jpg">
        <source media="(max-width: 700px)" srcset="img/beach_medium.jpg">
        <img src="img/beach.jpg" alt="A beach in the summer.">
      </picture>

      <h3>Beach Locator</h3>
      <a href="https://github.com/christosmr" target="_blank">
        <p>https://github.com/beach-locator</p>
      </a>

    </div>

    <div class="horizontal-break"></div>

    <div class="work">

      <picture>
        <source media="(max-width: 450px)" srcset="img/factory_small.jpg">
        <source media="(max-width: 700px)" srcset="img/factory_medium.jpg">
        <img src="img/factory.jpg" alt="A factory with a grey background full of smoke.">
      </picture>

      <h3>Factory</h3>
      <a href="https://github.com/christosmr" target="_blank">
        <p>https://github.com/factory</p>
      </a>

    </div>

    <div class="horizontal-break"></div>

    <div class="work">

      <picture>
        <source media="(max-width: 450px)" srcset="img/sunflower_small.jpg">
        <source media="(max-width: 700px)" srcset="img/sunflower_medium.jpg">
        <img src="img/sunflower.jpg" alt="A sunflower in sunny day.">
      </picture>

      <h3>SunNYflower</h3>
      <a href="https://github.com/christosmr" target="_blank">
        <p>https://github.com/SunNYflower</p>
      </a>

    </div>

  </section>

</div>

Solution

  • It's because content in .work div is ovrelapping. That makes your site overflow on mobile displays .

    You can avoid this by add word-wrap: break-word; property to work selector.

    Here is the Working code

    Also I add some space to your work to view the result

    body {
	height: 100%;
	margin: auto;
	max-width: 1000px;
}
hr {
	border: 0;
	border-radius: 25px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(251, 140, 0, 1), rgba(0, 0, 0, 0));
}
h1, h2 {
	font-weight: 400;
	letter-spacing: 1px;
}
h3 {
	font-weight: 400;
}
.container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 15px;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
.logo {
	order: -1;
	width: 20%;
}
.header {
	order: 0;
	text-align: right;
	text-transform: uppercase;
	width: 80%;
}
.header>h1 {
	margin-bottom: .07em;
	font-family: 'Mina', sans-serif, default;
}
.break-line {
	order: 1;
	width: 100%;
}
.main-image {
	height: auto;
	object-fit: contain;
	width: 100%;
}
.featured-work {
	margin: 1.5em auto;
	min-height: 150px;
	order: 3;
	width: 100%;
}
.featured-work>h2 {
	font-family: sans-serif, default;
	width: 100%;
}
.work {
	min-height: 50px;
	text-align: center;
	width: 31%;
	word-wrap: break-word;
}
.work>picture>img {
	height: auto;
	width: 100%;
}
.work>h3 {
	margin-top: .5em;
	text-transform: uppercase;
}
.work>a>p {
	margin-top: -0.8em;
}
.horizontal-break {
	width: 3.5%;
}
#main-image-container {
	order: 2;
}

@media screen and (max-width: 450px) {
  body {
    font-size: .9em
  }
  hr {
    height: 1px;
    margin-bottom: 5%;
  }
  .header {
    margin-top: -3%;
  }
  .header>h1 {
    margin-bottom: -0.5%;
  }
  .work>h3 {
    font-size: .8em;
  }
  .work>a>p {
    font-size: .6em;
    min-height: 45px;
    min-width: 45px;
  }
}

@media screen and (min-width: 451px) {
  body {
    font-size: 1em
  }
  hr {
    height: 2px;
    margin-bottom: 4%;
  }
  .work>h3 {
    font-size: .9em;
  }
  .work>a>p {
    font-size: .7em;
  }
}

@media screen and (min-width: 701px) {
  body {
    font-size: 1.25em
  }
  hr {
    height: 3px;
    margin-bottom: 3%;
  }
  .work>h3 {
    font-size: 1em;
  }
  .work>a>p {
    font-size: .8em;
  }
}

@media screen and (min-width: 1000px) {
  .work>h3 {
    font-size: 1.25em;
  }
}
    <div class="container">
    <picture class="logo">
        <source media="(max-width: 450px)" srcset="img/logo_small.png" />
        <source media="(max-width: 700px)" srcset="img/logo_medium.png" />
        <img src="img/logo.png" alt="The logo of the site."> </picture>
    <header class="header">
        <h1>Chris Maris</h1>
        <p>Front-end Warrior</p>
    </header>
    <div class="break-line">
        <hr>
    </div>
    <picture id="main-image-container">
        <source media="(max-width: 450px)" srcset="img/main_image_small.jpg" />
        <source media="(max-width: 700px)" srcset="img/main_image_medium.jpg" />
        <img class="main-image" src="img/main_image.jpg" alt="A laptop in a desk with flowers."> </picture>
    <section class="featured-work container">
        <h2>Featured Work</h2>
        <div class="work">
            <picture>
                <source media="(max-width: 450px)" srcset="img/beach_small.jpg" />
                <source media="(max-width: 700px)" srcset="img/beach_medium.jpg" />
                <img src="img/beach.jpg" alt="A beach in the summer."> </picture>
            <h3>Beach Locator</h3>
            <a href="https://github.com/christosmr" target="_blank">
            <p>https://github.com/beach-locator</p>
            </a> 
        </div>
        <div class="horizontal-break"></div>
        <div class="work">
            <picture>
                <source media="(max-width: 450px)" srcset="img/factory_small.jpg" />
                <source media="(max-width: 700px)" srcset="img/factory_medium.jpg" />
                <img src="img/factory.jpg" alt="A factory with a grey background full of smoke."> </picture>
            <h3>Factory</h3>
            <a href="https://github.com/christosmr" target="_blank">
            <p>https://github.com/factory</p>
            </a> 
        </div>
        <div class="horizontal-break"></div>
        <div class="work">
            <picture>
                <source media="(max-width: 450px)" srcset="img/sunflower_small.jpg" />
                <source media="(max-width: 700px)" srcset="img/sunflower_medium.jpg" />
                <img src="img/sunflower.jpg" alt="A sunflower in sunny day."> </picture>
            <h3>SunNYflower</h3>
            <a href="https://github.com/christosmr" target="_blank">
            <p>https://github.com/SunNYflower</p>
            </a> 
      </div>
    </section>
</div>