Text disappears when resizing window

Question

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;
	}
}



		
			
				
			
			
				Fionna
				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.
			
		


		
			
				
			
			
				Peppermint Butler
				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.
			
		


		
			
				
			
			
				Flame Princess
				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.

worc · Accepted Answer

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;
  }
}



  
    
      
    
    
      Fionna
      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.
    
  


  
    
      
    
    
      Peppermint Butler
      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.
    
  


  
    
      
    
    
      Flame Princess
      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.

Text disappears when resizing window

Answers (1)

Related Questions