Expand height of an element on smaller screens - html

Question

https://jsfiddle.net/7v0dyfo3/
This is (not exactly, without styling) what i'm trying to do for a listing.
It's all good but it does not resize properly.
I would like the div episode-box to expand its height for smartphone screens, so the text can be shown vertically, below the image.
It's not very correctly coded, but can you tell me what are my mistakes for the bad resizing ?
<article class="full-width">
<div class="post-box">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="guide-art-container">
<div class="episode-content">
<div class="saga">
<div class="row">
<div class="col-md-12">
<div class="episode-box">
<div class="episode-img">
<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
</div>
<span class="episode-nb"> <p>001</p></span>
<div class="episode-single- content">
<div class="episode-single-title">
<h5><b>Lorem Ipsum Title</b></h5>
</div>
<div class="episode-single- desc">
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
<hr2>
<span class="cast"><p> <b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br>
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
</div>
</div>
</div>
<div class="episode-box">
<div class="episode-img">
<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
</div>
<span class="episode-nb"><p>001</p></span>
<div class="episode-single-content">
<div class="episode-single-title">
<h5><b>Lorem Ipsum Title</b></h5>
</div>
<div class="episode-single-desc">
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
<hr2>
<span class="cast"><p> <b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br>
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--.post-box-->
</article>

Answer 1

You need to use media queries
Something like this: (Minimize your browser to see the effect)
.full-width {
margin: 0 0 30px;
padding: 0;
}
.container {
max-width: 1170px;
width: 100%;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
#media (min-width: 1200px)
.col-md-12 {
width: 100%;
}
.guide-art-container {
padding: 25px;
}
.saga-title {
margin-top: 15px;
}
.episode-box {
width: auto;
background-color: #F9F9F9;
margin-top: 7px;
box-shadow: inset 0px 100px 150px -150px rgba(204,204,204,1);
height: 150px;
border: 1px solid #E8E8E8;
position: relative;
}
.episode-img {
float: left;
}
.episode-box img {
float: left;
margin-right: 10px;
padding: 5px;
}
span.episode-nb {
position: absolute;
bottom: 2px;
left: 5px;
background-color: #FC8A19;
max-width: 100px;
width: 100%;
opacity: 0.8;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 15pt;
}
.episode-single-content {
padding: 10px 10px 10px 0px;
max-height: 150px;
}
.episode-single-desc {
max-height: 150px;
font-size: 9pt;
padding-right: 4px;
padding-left: 5px;
padding-top: 5px;
}
span.cast {
font-size: 7.4pt !important;
font-family: 'Roboto', Arial, Tahoma, Sans-serif;
line-height: 19px;
}
.thumbnail-ep {
float: left;
margin-right: 10px;
position: relative;
max-width: 260px;
width: 100%;
padding: 2px;
}
span.episode-nb {
position: absolute;
bottom: 2px;
left: 5px;
background-color: #FC8A19;
max-width: 100px;
width: 100%;
opacity: 0.8;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 15pt;
}
.episode-single-title h5 {
margin-top: 2px !important;
}
#media only screen and (max-width : 480px) {
.episode-img {
float:none;
position:relative;
}
.episode-box img {
float:none;
}
.thumbnail-ep {
float:none;
}
.episode-box {
height:auto;
}
}
<article class="full-width">
<div class="post-box">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="guide-art-container">
<div class="episode-content">
<div class="saga">
<div class="row">
<div class="col-md-12">
<div class="episode-box">
<div class="episode-img">
<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
<span class="episode-nb"><p>001</p></span>
</div>
<div class="episode-single-content">
<div class="episode-single-title">
<h5><b>Lorem Ipsum Title</b></h5>
</div>
<div class="episode-single-desc">
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
<hr2>
<span class="cast"><p><b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br>
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
</div>
</div>
</div>
<div class="episode-box">
<div class="episode-img">
<img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/>
<span class="episode-nb"><p>001</p></span>
</div>
<div class="episode-single-content">
<div class="episode-single-title">
<h5><b>Lorem Ipsum Title</b></h5>
</div>
<div class="episode-single-desc">
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
<br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p>
<hr2>
<span class="cast"><p><b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br>
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--.post-box-->
</article>
JS Fiddle

Answer 2

You need media query.
Suppose we have .high-height-in-xs-device
#media screen and (max-width:767px) {
.high-height-in-xs-device {
height: 800px;
}
}
The above CSS will only work in screen with width narrower than 767px, which is a bootstrap standard for xs screen widths.