I have the following CSS layout:
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
nav {
background-color: darkslateblue;
color: white;
padding: 20px;
}
main h2 {
padding: 20px 20px 10px 20px;
}
#item-wrapper {
display: flex;
padding: 10px;
}
#item-selector,
#item-viewer {
margin: 0 10px;
}
#item-selector {
display: flex;
flex-direction: column;
width: 250px;
overflow-y: scroll;
}
#item-viewer {
flex: 1;
height: 50vh;
}
.item {
border: 3px solid darkslateblue;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
}
#item-viewer {
border: 3px solid darkslateblue;
}
<nav>
<h1>Header</h1>
</nav>
<main>
<h2>Your items:</h2>
<div id="item-wrapper">
<div id="item-selector">
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
</div>
<div id="item-viewer">
<p style="padding: 10px;">Select an item on the left to view more information</p>
</div>
</div>
</main>
I want the scrollable div on the left to not exceed the height of the window. I have tried setting the height of <body> and <html> to 100vh and adding overflow: auto and overflow: hidden to body, html, #item-wrapper and #item-selector but none of these worked. If I give #item-selector and explicit height then it works, but I want it to fill the remainder of the window height so this isn't ideal. I would like #item-selector to not exceed the height of the page and to scroll when its contents exceed its height.
You have to apply height settings to all parent elements, so html and body and #item-selector get height: 100%;, and main has to get a calculated height value, which subtracts the height of the nav and h2 elements from 100%. height: calc(100% - 130px); will approximately do that like in the snippet below, but you either would have to define exact height settings for nav and h2, or use javascript to get their actual heights.
* {
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
height: 100%;
}
nav {
background-color: darkslateblue;
color: white;
padding: 20px;
}
main {
height: calc(100% - 130px);
}
main h2 {
padding: 20px 20px 10px 20px;
}
#item-wrapper {
display: flex;
padding: 10px;
height: 100%;
}
#item-selector,
#item-viewer {
margin: 0 10px;
}
#item-selector {
display: flex;
flex-direction: column;
width: 250px;
overflow-y: scroll;
height: 100%;
}
#item-viewer {
flex: 1;
height: 50vh;
}
.item {
border: 3px solid darkslateblue;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
}
#item-viewer {
border: 3px solid darkslateblue;
}
<nav>
<h1>Header</h1>
</nav>
<main>
<h2>Your items:</h2>
<div id="item-wrapper">
<div id="item-selector">
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
</div>
<div id="item-viewer">
<p style="padding: 10px;">Select an item on the left to view more information</p>
</div>
</div>
</main>
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
nav {
background-color: darkslateblue;
color: white;
padding: 20px;
height: 10vh;
}
main h2 {
padding: 5px 20px 20px 20px;
}
#item-wrapper {
display: flex;
padding: 10px;
height:85vh;
}
#itemHeaderWrapper{
height:5vh;
}
#item-selector,
#item-viewer {
margin: 0 10px;
}
#item-selector {
display: flex;
flex-direction: column;
width: 250px;
overflow-y: scroll;
}
#item-viewer {
flex: 1;
height: 50vh;
}
.item {
border: 3px solid darkslateblue;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
}
#item-viewer {
border: 3px solid darkslateblue;
}
<nav>
<h1>Header</h1>
</nav>
<main>
<div id='itemHeaderWrapper'>
<h2>Your items:</h2>
</div>
<div id="item-wrapper">
<div id="item-selector">
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
<div class="item">
<p style="font-size:50px;">Item</p>
</div>
</div>
<div id="item-viewer">
<p style="padding: 10px;">Select an item on the left to view more information</p>
</div>
</div>
</main>
In this code, I've wrapped the h2 tag in a div, id 'itemHeaderWrapper' which I've given a pre-defined height of 5vh. I've also set the height of the nav to 10vh. This means I can force the scrollable div on the left to have height 85vh and then scroll.
Related
I'm trying to get the divs always be centered even after one div drops to the bottom if window size is adjusted. So basically if there are 5 divs and one drops to the bottom after window size reached a certain point, so the remaining 4 divs would still be centered. If possible it would be better if the one dropped wouldn't center but be on the left.
.item-holder {
width: 95%;
height: 80%;
margin-left: auto;
margin-right: auto;
overflow: scroll;
background-color: teal;
}
.item {
width: 300px;
height: 300px;
background-color: black;
float: left;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 25px;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
How the result should look
Use CSS Grid Layout
CSS Grid was like made for this purpose. In the following snippet, I have removed some of your lines and resized the children. But you need to pay attention to the three lines of code added to .item-holder.
I have also made the holder resizable, so you can play with it.
.item-holder {
width: 95%;
height: 80%;
background-color: teal;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 5px;
/* Following code makes the element resizable*/
resize: horizontal;
overflow: auto;
}
.item {
width: 100px;
height: 50px;
background-color: black;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
Further Reading
See CSS Grid Layout on MDN
Learn CSS Grid Layout on freeCodeCamp.org
See CSS Grid Layout: Create flexible layouts using auto-fill on freeCodeCamp.org
You can make the .item-holder a flexbox
.item-holder {
width: 95%;
height: 80%;
margin-left: auto;
margin-right: auto;
overflow: scroll;
background-color: teal;
display: flex;
flex-flow: row wrap;
}
.item {
width: 100px;
height: 100px;
background-color: black;
float: left;
margin-right: 25px;
margin-left: 25px;
margin-bottom: 25px;
}
.item-text {
font-size: 20px;
color: white;
}
<div class="item-holder">
<div class="item">
<p class="item-text">Item 1</p>
</div>
<div class="item">
<p class="item-text">Item 2</p>
</div>
<div class="item">
<p class="item-text">Item 3</p>
</div>
<div class="item">
<p class="item-text">Item 4</p>
</div>
<div class="item">
<p class="item-text">Item 5</p>
</div>
<div class="item">
<p class="item-text">Item 6</p>
</div>
<div class="item">
<p class="item-text">Item 7</p>
</div>
<div class="item">
<p class="item-text">Item 8</p>
</div>
<div class="item">
<p class="item-text">Item 9</p>
</div>
<div class="item">
<p class="item-text">Item 10</p>
</div>
</div>
I tried a lot in making this as responsive but I was not successful.
How to make this carousel responsive? In mobile only one image should be displayed, in laptop 3 images should be displayed and in desktop 4 images as in the below image.
Carousel displaying in desktop:
.col-sm-3 {
float: left;
padding: 5px 10px;
text-align: center;
}
.col-xs-12 {
float: left;
padding: 5px 10px;
text-align: center;
}
/* .carousel-indicators {
float: left;
display: flex;
} */
.all {
padding-top: 15px;
}
img {
border-radius: 50%;
padding: 5px 15px 5px 15px;
height: 145px;
width: 145px;
}
.carousel-caption {
color: black;
}
.jumbotron {
text-align: center;
color: green;
}
p {
font-weight: 700;
color: darkgreen;
background-color: transparent;
}
<div class="container carousel-inner">
<div class="carousel-item active">
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/blue.png">
<div class="carousel-caption" style="color: black;">
<h5>ABC</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/sblue.jpg">
<div class="carousel-caption" style="color: black;">
<h5>BCD</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/pink.jpg">
<div class="carousel-caption" style="color: black;">
<h5>CDE</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/sblue.jpg">
<div class="carousel-caption" style="color: black;">
<h5>DEF</h5>
<p>My Paragraph</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/green.jpg">
<div class="carousel-caption" style="color: black;">
<h5>EFG</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/choco.jpg">
<div class="carousel-caption" style="color: black;">
<h5>FGH</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/sblue.jpg">
<div class="carousel-caption" style="color: black;">
<h5>GHI</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/sblue.jpg">
<div class="carousel-caption" style="color: black;">
<h5>HIJ</h5>
<p>My Paragraph</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/blue.png">
<div class="carousel-caption" style="color: black;">
<h5>IJK</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/pink.jpg">
<div class="carousel-caption" style="color: black;">
<h5>JKL</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/sblue.jpg">
<div class="carousel-caption" style="color: black;">
<h5>KLM</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="C:/Users/5023/Desktop/Products/choco.jpg">
<div class="carousel-caption" style="color: black;">
<h5>LMN</h5>
<p>My Paragraph</p>
</div>
</div>
</div>
</div>
I think what you are looking for are media-queries where you can define CSS for specific selectors for a range of screen resolutions. I modified your code (see below).
The most important change here are the media-queries:
#media screen and (max-width: 768px) {
.col {
width: 100%;
}
}
#media screen and (min-width: 768px) {
.col {
width: 25%;
}
}
#media screen and (min-width: 992px) {
.col {
width: 20%;
}
}
Full solution below:
.col {
float: left;
padding: 5px 10px;
text-align: center;
}
.carousel-inner {
height: 250px;
overflow: hidden;
}
/* .carousel-indicators {
float: left;
display: flex;
} */
.all {
padding-top: 15px;
}
img {
border-radius: 50%;
padding: 5px 15px 5px 15px;
height: 145px;
width: 145px;
}
.carousel-caption {
color: black;
}
.jumbotron {
text-align: center;
color: green;
}
p {
font-weight: 700;
color: darkgreen;
background-color: transparent;
}
#media screen and (max-width: 768px) {
.col {
width: 100%;
}
}
#media screen and (min-width: 768px) {
.col {
width: 25%;
}
}
#media screen and (min-width: 992px) {
.col {
width: 20%;
}
}
These queries say for those specific screen widths. Apply the following style to the elements with the "col" class.
<div class="container carousel-inner">
<div class="carousel-item active">
<div class="col">
<img src="C:/Users/5023/Desktop/Products/blue.png">
<div class="carousel-caption" style="color: black;">
<h5>ABC</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col">
<img src="C:/Users/5023/Desktop/Products/sblue.jpg">
<div class="carousel-caption" style="color: black;">
<h5>BCD</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col">
<img src="C:/Users/5023/Desktop/Products/pink.jpg">
<div class="carousel-caption" style="color: black;">
<h5>CDE</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col">
<img src="C:/Users/5023/Desktop/Products/sblue.jpg">
<div class="carousel-caption" style="color: black;">
<h5>DEF</h5>
<p>My Paragraph</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<img src="C:/Users/5023/Desktop/Products/green.jpg">
<div class="carousel-caption" style="color: black;">
<h5>EFG</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col">
<img src="C:/Users/5023/Desktop/Products/choco.jpg">
<div class="carousel-caption" style="color: black;">
<h5>FGH</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col">
<img src="C:/Users/5023/Desktop/Products/sblue.jpg">
<div class="carousel-caption" style="color: black;">
<h5>GHI</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col">
<img src="C:/Users/5023/Desktop/Products/sblue.jpg">
<div class="carousel-caption" style="color: black;">
<h5>HIJ</h5>
<p>My Paragraph</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<img src="C:/Users/5023/Desktop/Products/blue.png">
<div class="carousel-caption" style="color: black;">
<h5>IJK</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col">
<img src="C:/Users/5023/Desktop/Products/pink.jpg">
<div class="carousel-caption" style="color: black;">
<h5>JKL</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col">
<img src="C:/Users/5023/Desktop/Products/sblue.jpg">
<div class="carousel-caption" style="color: black;">
<h5>KLM</h5>
<p>My Paragraph</p>
</div>
</div>
<div class="col">
<img src="C:/Users/5023/Desktop/Products/choco.jpg">
<div class="carousel-caption" style="color: black;">
<h5>LMN</h5>
<p>My Paragraph</p>
</div>
</div>
</div>
</div>
In the head section, I forgot to include these links
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
I want to create grid or table with three cards. Two cards in a row and the third under these two cards, like on the image (the third card can be other size). But how can I do this?
<div class="cards">
<div id="card1">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card2">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card3">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
This should work
.first-row{
display:flex;
}
.first-row .card{
flex:1;
}
.card{
border:5px solid black;
margin: 10px;
}
<div class="cards">
<div class='first-row'>
<div class='card' id="card1">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div class='card' id="card2">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
<div class='card' id="card3">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
Check it out.
.first-row{
display:flex;
}
.first-row .card{
flex:1;
}
.card{
border:5px solid black;
margin: 10px;
}
<div class="cards">
<div class='first-row'>
<div class='card' id="card1">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div class='card' id="card2">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
<div class='card' id="card3">
<img src="..." alt="Image" style="width: 100%">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
The Answer is CSS Flex Box ;)
section {
max-width: 740px;
margin: 0 auto;
display: flex;
}
.column {
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
section:nth-of-type(5) .column:first-of-type {
flex-grow: 2;
flex-shrink: 2;
flex-basis: 22px;
}
section:nth-of-type(6) .column:nth-of-type(2) {
flex-grow: 4;
flex-shrink: 4;
flex-basis: 66px;
}
/* OTHER STYLES */
html, body {
color: white;
height: 100%;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
padding: 10px;
background: linear-gradient(135deg, #b04, #f80) fixed;
}
.column {
padding: 10px 0;
background-color: rgba(255, 0, 0, 0.25);
text-align: center;
border: 1px solid transparentize(white, 0.25);
background-color: transparentize(white, 0.8);
color: transparentize(white, 0.1);
}
<section>
<div class="column">One Third</div>
<div class="column">One Third</div>
<div class="column">One Third</div>
</section>
<section>
<div class="column">One Half</div>
<div class="column">One Half</div>
</section>
<section>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
</section>
<section>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
<div class="column">One Sixth</div>
</section>
<section>
<div class="column">One Half</div>
<div class="column">One Fourth</div>
<div class="column">One Fourth</div>
</section>
<section>
<div class="column">One Sixth</div>
<div class="column">Two Thirds</div>
<div class="column">One Sixth</div>
</section>
.cards {
display: grid;
/* Make two tracks with the remaining space*/
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
#card1,
#card2 {
background: #a03;
}
#card3 {
background: #be3;
/*Let card3 span 2 tracks*/
grid-column: span 2;
}
/*This will make the images span 100%*/
img {
max-width: 100%;
height: auto;
}
<div class="cards">
<div id="card1">
<img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card2">
<img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
<div id="card3">
<img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">
<div class="card-container">
<h4 class="class-text"><b>...</b></h4>
<p></p>
</div>
</div>
</div>
I have a goods list - floating div with position: relative. I need to change height of this block (for buttons like 'Add to basket') when I hover it without touching/moving another blocks. For example: wildberries.ru/catalog/20/women.aspx
I've tried to copy styles from that site but have failed. I don't fully understanding how it work =|
I have something like this:
#goods { width: 330px }
.item {
position: relative;
float: left;
width: 80px;
height: 140px;
margin: 5px;
padding: 8px;
border: solid 1px #999;
overflow: hidden;
text-align: center;
}
.item:hover {
height: 180px;
}
p { margin: 3px }
<div id="goods">
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
<div class="item">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
add an innerWrap div to .item and use position: absolute;
#goods { width: 330px }
.item {
position: relative;
float: left;
width: 80px;
margin: 5px;
padding: 8px;
height: 145px;
text-align: center;
}
.itemWrap{
height: 145px;
overflow: hidden;
border: solid 1px #999;
position: absolute;
}
.item:hover .itemWrap{
height: 180px;
z-index: 2;
background: #fff;
}
p { margin: 3px }
<div id="goods">
<div class="item">
<div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
<div class="item">
<div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
<div class="item">
<div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
<div class="item">
<div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
<div class="item">
<div class="itemWrap">
<img src="http://placehold.it/80x120" />
<p>Cool item</p>
<button>buy</button>
</div>
</div>
</div>
How would I vertically align text to the middle of a caption that has a position of absolute. I want the text whether it be 1 line or 2 lines for it to be in the middle of the green block.
Here is a example:
https://jsfiddle.net/DTcHh/7467/
<div class="row">
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.holder {
position:relative;
display: table;
width: 100%;
}
.background {
background: #000;
height: 150px;
width: 100%;
}
.text {
position: absolute;
left:0;
right: 0;
bottom: 0;
text-align: center;
}
h4 {
background: green;
font-size: 1em;
margin: 0;
padding: 5px 10px;
min-height: 50px;
}
UPDATED
Like this ....
FIDDLE v4
This version I believe may have it.
Changed the <h4> to a <p>
Removed from <p>
width: 100%;
display: table-cell;
Added to <p>
margin-left: auto;
margin-right: auto;
transform: translateY(25%);
Changes to <p>
padding: 5px 10px; -TO- padding: 0px 10px;
Use line-height on h4 style with value more than double of the font-size:
h4 {
background: green;
font-size: 1em;
margin: 0;
padding: 5px 10px;
min-height: 50px;
line-height: 2.2em;
}
Checkout this DEMO