Text disappears when resizing window

I am taking a course and I got stuck at one of my homeworks. I am supposed to use media queries to make the site responsive and mostly it works as supposed to, but when I get to certain value, my text disappears.. It happens at window width 680px to 690px and I just have noooooo idea, why.. it should be covered by @media (max-width: 700px) statement, shouldn´t it? And my css works with all the other window widths just fine.. Any ideas?

/**
 * GENERAL
 */
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

/* clearfix */
.group:before,
.group:after { content: " "; display: table; }
.group:after { clear: both; }


body {
	color: #2f2f2f;
	font: 0.9em/1.35em 'Avant Garde', 'Century Gothic', sans-serif;
	padding: 1.4em;
	max-width: 100%;
}

p {
	margin: 0;
}

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

.container {
	max-width: 960px;
	margin: 0 auto;
}

article {
	width: 31.25%; /*width: 300px;*/
	float: left;
	margin: 0 1.04%; /*margin: 0 10px;*/
}

.text {
	text-align: center;
}

@media (max-width: 1010px) {
	body {
		font-size: 0.85em;
		line-height: 1.28em;
		padding: 1em;
	}

	h3 {
		font-size: 1.05em;
		margin: 0.7em;
	}
}

@media (max-width: 940px) {
	body {
		font-size: 0.75em;
		line-height: 1.13em;
		padding: 0.5em;
	}

	h3 {
		margin: 0.25em 0;
		font-size: 1em;
	}
}

@media (max-width: 780px) {
	article {
		float: none;
		width: 100%;
		height: 200px;
		overflow: hidden;
		margin: 0 0 2.55% 0;
	}

	.image {
		display: inline-block;
		vertical-align: middle;
	}

	.text {
		display: inline-block;
		max-width: 55%;
		vertical-align: middle;
	}

}

@media (max-width: 700px) {
	article {
		position: relative;
		width: 300px;
		margin: 10px auto;
	}

	.image, .text {
		display: block;
	}

	.text {
		position: absolute;
		bottom: 0;
		left: 0;
		max-width: none;
		background: rgba(255, 255, 255, 0.5);
		color: #444;
		font-size: 0.75em;
		z-index: 2;
	}

	h3 {
		color: #323232;
	}

	.image {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
}
<div class="container group">

		<article>
			<header class="image">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Fionna">
			</header>
			<div class="text">
				<h3>Fionna</h3>
				<p>An alternate, female version of Finn, Fionna the human is just as brave, adventurous and awesome as her male counterpart as she faces off against her enemy, the Ice Queen.</p>
			</div>
		</article>


		<article>
			<header class="image">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Peppermint Butler">
			</header>
			<div class="text">
				<h3>Peppermint Butler</h3>
				<p>Peppermint Butler is an inhabitant of the Candy Kingdom and loyal butler to Princess Bubblegum. He has a mysterious past and an undefined relationship with Death.</p>
			</div>
		</article>


		<article>
			<header class="image">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Flame Princess">
			</header>
			<div class="text">
				<h3>Flame Princess</h3>
				<p>Flame Princess is a hot-headed princess from the Fire Kingdom and Finn's new crush. Her flame powers are tied to her emotions, and she's been known to anger quite easily.
				<p>
			</div>
		</article>
	</div>

Upvotes: 1

Views: 3579

Answers (1)

worc
worc

Reputation: 3782

header.image and div.text are both inline-block elements when the view width is less than 780px. So the both of them are trying to share the width of the parent article element. But, div-text has a max-width of 55%, so it's overflowing its sibling and parent, and moves to the next line. But now that it's on the next line, it's partially hidden by the image container, but the overflow:hidden on its parent makes it completely hidden.

If you change the max-width of div.text to 50%, you shouldn't get any more overflow issues when resizing:

/**
 * GENERAL
 */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* clearfix */

.group:before,
.group:after {
  content: " ";
  display: table;
}

.group:after {
  clear: both;
}

body {
  color: #2f2f2f;
  font: 0.9em/1.35em 'Avant Garde', 'Century Gothic', sans-serif;
  padding: 1.4em;
  max-width: 100%;
}

p {
  margin: 0;
}

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

.container {
  max-width: 960px;
  margin: 0 auto;
}

article {
  width: 31.25%;
  /*width: 300px;*/
  float: left;
  margin: 0 1.04%;
  /*margin: 0 10px;*/
}

.text {
  text-align: center;
}

@media (max-width: 1010px) {
  body {
    font-size: 0.85em;
    line-height: 1.28em;
    padding: 1em;
  }
  h3 {
    font-size: 1.05em;
    margin: 0.7em;
  }
}

@media (max-width: 940px) {
  body {
    font-size: 0.75em;
    line-height: 1.13em;
    padding: 0.5em;
  }
  h3 {
    margin: 0.25em 0;
    font-size: 1em;
  }
}

@media (max-width: 780px) {
  article {
    float: none;
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin: 0 0 2.55% 0;
  }
  .image {
    display: inline-block;
    vertical-align: middle;
  }
  .text {
    display: inline-block;
    /*max-width: 55%;*/
    max-width: 50%;
    vertical-align: middle;
  }
}

@media (max-width: 700px) {
  article {
    position: relative;
    width: 300px;
    margin: 10px auto;
  }
  .image,
  .text {
    display: block;
  }
  .text {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: none;
    background: rgba(255, 255, 255, 0.5);
    color: #444;
    font-size: 0.75em;
    z-index: 2;
  }
  h3 {
    color: #323232;
  }
  .image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
<div class="container group">

  <article>
    <header class="image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Fionna">
    </header>
    <div class="text">
      <h3>Fionna</h3>
      <p>An alternate, female version of Finn, Fionna the human is just as brave, adventurous and awesome as her male counterpart as she faces off against her enemy, the Ice Queen.</p>
    </div>
  </article>


  <article>
    <header class="image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Peppermint Butler">
    </header>
    <div class="text">
      <h3>Peppermint Butler</h3>
      <p>Peppermint Butler is an inhabitant of the Candy Kingdom and loyal butler to Princess Bubblegum. He has a mysterious past and an undefined relationship with Death.</p>
    </div>
  </article>


  <article>
    <header class="image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Montauk_Point_Lighthouse.jpg/300px-Montauk_Point_Lighthouse.jpg" width="300" height="200" alt="Flame Princess">
    </header>
    <div class="text">
      <h3>Flame Princess</h3>
      <p>Flame Princess is a hot-headed princess from the Fire Kingdom and Finn's new crush. Her flame powers are tied to her emotions, and she's been known to anger quite easily.
        <p>
    </div>
  </article>
</div>

Upvotes: 2

Related Questions