Reputation: 13
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
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