CSS not resizing items in grid - html

Question

My items within the grid are not re sizing for responsiveness in tablet and mobile view. They are looking cut off. Please any help would be greatly appreciated.
Please let me know if you need to see a screen shot of what is occurring.
.ch-grid {
margin: -10px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
overflow: hidden;
height: auto;
clear: both;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: both;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 200px;
height: 200px;
display: inline-block;
margin: 10px;
overflow: hidden;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 0 rgba(247, 168, 0, 0.4), inset 0 0 0 16px rgba(247, 168, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
}
.ch-img-4 {
background-image: url(images/4.jpg);
}
.ch-img-5 {
background-image: url(images/5.jpg);
}
.ch-img-6 {
background-image: url(images/6.jpg);
}
.ch-img-1 {
background-image: url(images/1.jpg);
}
.ch-img-2 {
background-image: url(images/2.jpg);
}
.ch-img-3 {
background-image: url(images/3.jpg);
}
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
/*for a smooth font */
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
display: block;
color: #fff;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff222;
color: rgba(247, 168, 0, 0.8);
}
.ch-item:hover {
box-shadow: inset 0 0 0 110px rgba(0, 155, 222, 0.4), inset 0 0 0 16px rgba(0, 155, 222, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.mini-title {
position: absolute;
z-index: 2000;
top: 10%;
left: 0;
margin: auto;
color: #fff;
text-align: center;
right: 0;
overflow: hidden;
padding-bottom: 0px;
margin-bottom: 0px;
width: auto;
height: auto;
clear: both;
min-width: 250px;
}
<section class="bg-image section-g clearfix">
<div class="image-wrapper col-md-6 col-sm-3 pull-left">
<div class="background-image-wrapper wow slideInLeft">
<img class="background-image" alt="" src="images/bg_01.jpg">
<div class="mini-title">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-4">
<div class="ch-info">
<h3>Gail</h3>
<p>mom</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-5">
<div class="ch-info">
<h3>Jeff</h3>
<p>dad</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-6">
<div class="ch-info">
<h3>Heidi</h3>
<p>equestrian</p>
</div>
</div>
</li>
</ul>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Joey</h3>
<p>drummer</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3>Laura</h3>
<p>soccer player</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Sara</h3>
<p>artist</p>
</div>
</div>
</li>
</ul>
</div>
<!-- end mini-title -->
</div>
</div>

Answer 1

You can use vh and vw in order to display sizes according to viewport dimensions. This way, you can specify the height for your h3 tag:
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 15vh;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
Or whatever you want.
See the snippet for an exemple :
.ch-grid {
margin: -10px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
overflow: hidden;
height: auto;
clear: both;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: both;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 200px;
height: 200px;
display: inline-block;
margin: 10px;
overflow: hidden;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 0 rgba(247, 168, 0, 0.4), inset 0 0 0 16px rgba(247, 168, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
}
.ch-img-4 {
background-image: url(images/4.jpg);
}
.ch-img-5 {
background-image: url(images/5.jpg);
}
.ch-img-6 {
background-image: url(images/6.jpg);
}
.ch-img-1 {
background-image: url(images/1.jpg);
}
.ch-img-2 {
background-image: url(images/2.jpg);
}
.ch-img-3 {
background-image: url(images/3.jpg);
}
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
/*for a smooth font */
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 15vh;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
display: block;
color: #fff;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff222;
color: rgba(247, 168, 0, 0.8);
}
.ch-item:hover {
box-shadow: inset 0 0 0 110px rgba(0, 155, 222, 0.4), inset 0 0 0 16px rgba(0, 155, 222, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.mini-title {
position: absolute;
z-index: 2000;
top: 10%;
left: 0;
margin: auto;
color: #fff;
text-align: center;
right: 0;
overflow: hidden;
padding-bottom: 0px;
margin-bottom: 0px;
width: auto;
height: auto;
clear: both;
min-width: 250px;
}
<section class="bg-image section-g clearfix">
<div class="image-wrapper col-md-6 col-sm-3 pull-left">
<div class="background-image-wrapper wow slideInLeft">
<img class="background-image" alt="" src="images/bg_01.jpg">
<div class="mini-title">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-4">
<div class="ch-info">
<h3>Gail</h3>
<p>mom</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-5">
<div class="ch-info">
<h3>Jeff</h3>
<p>dad</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-6">
<div class="ch-info">
<h3>Heidi</h3>
<p>equestrian</p>
</div>
</div>
</li>
</ul>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Joey</h3>
<p>drummer</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3>Laura</h3>
<p>soccer player</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Sara</h3>
<p>artist</p>
</div>
</div>
</li>
</ul>
</div>
<!-- end mini-title -->
</div>
</div>
EDIT: As #Jamie Barker noticed, this solution isn't 100% working, depending on viewport size. To prevent this behaviour, you can use media queries for tablets/phones, or max-height