I'm building a board with cards inside, just like Trello board.
The JSFiddle is here
Here is the code:
<div class="board-container">
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-content">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 2</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 3</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 4</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And stylesheet:
.board-container {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
overflow-x: auto;
overflow-y: hidden;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: 100%;
}
.cards {
height: 100%;
overflow-y: auto;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
display: inline-block;
height: 100%;
overflow: hidden;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
margin-right: 10px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
I cannot make my board scroll horizontally to see all card containers and vertically inside a card container.
Sometimes, as shown in fiddle, the containers get stucked one above another, and sometimes they scroll the whole page, not only the container.
.board-container {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
overflow-x: auto;
overflow-y: hidden;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: 100%;
}
.cards {
height: 100%;
overflow-y: auto;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
display: inline-block;
height: 100%;
overflow: auto;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
<div class="board-container">
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-content">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 2</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 3</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 4</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 02</div>
<div />
</div>
<div class="card-container">
<div class="card-header">Material 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you have an issue with how your elements are nested. Elements with the class cards-container seem to be nested within other elements with the same class. See the fiddle.
.board-container {
padding: 0px;
margin: 0px;
display: flex;
flex-direction: column;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
overflow-x: auto;
overflow-y: hidden;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: 100%;
}
.cards {
height: 100%;
overflow-y: auto;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
display: inline-block;
height: 100%;
overflow: hidden;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
margin-right: 10px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
/*Get rid of scrollbar from html */
html {
overflow-x: hidden;
}
/* Add vertical scroll to card container */
.card-container{
height: 50px;
overflow-y: scroll;
}
<div class="board-container">
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-content">
<div>
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
</div>
</div>
</div>
the html provided is a little messy but i think you need something like this :
<div class="board-top-menu">
<div class="board-top-menu-item">TOP MENU ITEM 1</div>
<div class="board-top-menu-item">TOP MENU ITEM 2</div>
</div>
<div class="board-container">
<div class="cards-container">
<div class="cards-container-head">
<div class="cards-container-title">Test Panel 1</div>
</div>
<div class="cards">
<div class="card-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="card-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
<div class="card-container">
<div class="cards-container-head">
<div class="cards-container-title">ITEM 01</div>
</div>
<div class="card-container">
<div class="card-header">Material 1</div>
</div>
</div>
</div>
</div>
<div class="board-content">content</div>
i didn't do much on css but it should be something like this :
body { overflow:hidden; }
.board-container {
padding: 0px;
margin: 0px;
}
.board-top-menu {
width: 100%;
background-color: grey;
display: flex;
flex-direction: row;
padding: 5px;
}
.board-top-menu-item {
padding: 5px;
}
.board-top-menu-item:hover {
background-color: #fefefe;
}
.board-content {
display: inline-block;
float: left;
padding: 5px;
background-color: white;
white-space: nowrap;
height: 100%;
width: calc(100% - 300px);
}
.cards {
height: 100vh;
overflow-y: scroll;
padding-bottom: 20px;
}
.cards-container {
width: 270px;
float: left;
display: inline-block;
height: 100%;
min-height: 100px;
background-color: #e2e4e6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding-bottom: 20px;
margin-right: 10px;
vertical-align: top;
}
.cards-container-head {
position: relative;
padding: 10px 15px;
margin-bottom: 5px;
}
.cards-container-title {
font-weight: bold;
white-space: normal;
width: 100%;
}
.card-container {
width: 100%;
margin: 0 auto 10px;
background-color: #fff;
min-height: 100px;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: 0.15s;
}
.card-header {
padding: 5px 10px;
border-bottom: 1px solid #dbdbdb;
white-space: normal;
word-break: break-all;
word-wrap: break-world;
display: flex;
flex-direction: row;
justify-content: space-between;
}
See this pen
Related
I am designing this website for my introductory course. They require flex/grid layouts (although we didn't cover this in class). I decided to follow a youtube tutorial that was making a grid with 3 columns (1fr each). It then added a background to every "cell". In every "cell" I have a title and a description. I want to style the title and description in each "cell" to always be in the center, no matter the sizing of the page. I have managed to make the text adjust its size to the dimension of the page, but the title still overflows to the right when I minimize the window's width.
This is what I mean by overflow:
As you might guess, when the width is too large, the title tends to go to the right. This is the code (I no longer have images as background but you get the idea):
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => { //pentru fiecare item din portofolioItem vad cand am mouse pe el
portfolioItem.addEventListener('mouseover', () => {
portfolioItem.childNodes[1].classList.add('img-darken');//si cand am mouse-ul pe el iau primul copil
//care este portofolio-img-background
})
portfolioItem.addEventListener('mouseout', () => {
portfolioItem.childNodes[1].classList.remove('img-darken');
})
})
.portfolio-items-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper{
position:relative;
}
.portfolio-img-background{
height:350px;
width: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.portfolio-img-background:nth-of-type(odd)
{
background-color: maroon;
}
.portfolio-img-background:nth-of-type(even)
{
background-color: rgb(101, 172, 122);
}
.title-text-wrapper{
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
#italian{
font-family: 'Pacifico', cursive;
}
#american{
font-family: 'Mitr';
}
.title-wrapper div{
justify-content: center;
font-size:5vw;
color: white;
align-items: center;
text-align: center;
align-content: center;
}
/* Needs to be more specific with selector*/
.title-text-wrapper .subtitle{
transition: 1s;
font-weight: 600;
color: transparent;
align-self: center;;
}
.title-text-wrapper:hover .subtitle{
font-weight: 600;
color: lightseagreen;
}
.img-darken{
transition: 1s;
filter: brightness(10%);
}
.logo-wrapper{
width: 50%;
margin-bottom: 2px;
}
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio1.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="american">American</div>
</div>
<div class="subtitle">
This is a description of american food.
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio2.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="italian">Italian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio3.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Asian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio4.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mexican">Mexican</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio5.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="romanian">Romanian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio8.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="barbeque">Barbeque</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio9.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="indian">Indian</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio10.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Chinese</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio11.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mediteranean">Mediteranean</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio12.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="desserts">Desserts</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio6.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="smoothies">Smoothies</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio7.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="coffee">Coffee</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
</div>
</div>
I'm a beginner at this, so I would appreciate your advice on anything that's wrong with this code.
Issue is you are using padding left right to make item in center, I removed that and make its width:100% as you are using flex so its align center already
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => { //pentru fiecare item din portofolioItem vad cand am mouse pe el
portfolioItem.addEventListener('mouseover', () => {
portfolioItem.childNodes[1].classList.add('img-darken');//si cand am mouse-ul pe el iau primul copil
//care este portofolio-img-background
})
portfolioItem.addEventListener('mouseout', () => {
portfolioItem.childNodes[1].classList.remove('img-darken');
})
})
.portfolio-items-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper{
position:relative;
}
.portfolio-img-background{
height:350px;
width: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.portfolio-img-background:nth-of-type(odd)
{
background-color: maroon;
}
.portfolio-img-background:nth-of-type(even)
{
background-color: rgb(101, 172, 122);
}
.title-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
width: 100%;
}
#italian{
font-family: 'Pacifico', cursive;
}
#american{
font-family: 'Mitr';
}
.title-wrapper div{
justify-content: center;
font-size:5vw;
color: white;
align-items: center;
text-align: center;
align-content: center;
}
/* Needs to be more specific with selector*/
.title-text-wrapper .subtitle{
transition: 1s;
font-weight: 600;
color: transparent;
align-self: center;
}
.title-text-wrapper:hover .subtitle{
font-weight: 600;
color: lightseagreen;
}
.img-darken{
transition: 1s;
filter: brightness(10%);
}
.logo-wrapper{
width: 50%;
margin-bottom: 2px;
}
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio1.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="american">American</div>
</div>
<div class="subtitle">
This is a description of american food.
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio2.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="italian">Italian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio3.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Asian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio4.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mexican">Mexican</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio5.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="romanian">Romanian</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio8.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="barbeque">Barbeque</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio9.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="indian">Indian</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio10.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="chinese">Chinese</div>
</div>
<div class="subtitle">
Item
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio11.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="mediteranean">Mediteranean</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio12.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="desserts">Desserts</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio6.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="smoothies">Smoothies</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/Portfolio7.jpg);"></div>
<div class="title-text-wrapper">
<div class="title-wrapper">
<div id="coffee">Coffee</div>
</div>
<div class="subtitle">
</div>
</div>
</div>
</div>
</div>
Trying to Get this Grid format
Hello, I am currently new to using bootstrap 4 and am trying to get the format above.
This is what I am currently trying so far....
<div class="container">
<div class="row">
<div class="col-md-4" >1</div>
<div class="col-md-8">2</div>
<div class="col-md-8 ">3</div>
</div>
</div>
Here you go!
.content {
min-height: 100px;
background: #ccc;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4">
<div class="row h-100">
<div class="col-12 h-100">
<div class="content h-100">1</div>
</div>
</div>
</div>
<div class="col-8">
<div class="row">
<div class="col-12 mb-3 pl-0">
<div class="content">2</div>
</div>
<div class="col-12 pl-0">
<div class="content">3</div>
</div>
</div>
</div>
</div>
</div>
.one, .two, .three{
border: solid 2px gray;
min-height: 150px;
font-weight: bold;
}
.one{
background: lightblue;
}
.two{
background: lightgreen;
}
.three{
background: pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-5 one">1</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-8 two">2</div>
</div>
<div class="row">
<div class="col-sm-8 three">3</div>
</div>
</div>
</div>
</div>
I am trying to make a grid of responsive squares, which would look similar to a squared paper. I used a pre-prepared solution, which I tried to adopt to my purpose. My HTML code looks like this (example grid of 4*4 squares):
.square {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
margin: 0%;
overflow: hidden;
}
.content {
position: absolute;
height: 100%;
width: 100%;
padding: 0%;
}
.table {
display: table;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
border: thin solid black;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
The grid is OK in Firefox. But when I look at it in Chrome, it displays two lines between second and third row (and between second and third column) instead of one. I tried to set .square background-color to black. It worked partially, but the line in question looks thicker than the others. Is there a batter solution?
There is no proper solution for this. Seems like Chrome rounds off widths on display: table but not on display: block. Slight change of markup produces consistent result:
.square {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
margin: 0%;
overflow: hidden;
}
.content {
position: absolute;
height: 100%;
width: 100%;
padding: 0%;
}
.table {
/* removed display table */
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}
.table-cell {
/* removed display table-cell */
vertical-align: middle;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
border: thin solid black;
/* added */
box-sizing: border-box;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
I guess your problem ist, that you have display:table and thus have double-borders inside yuor table. You can fix that with border-collapse:collapse inside your .table class.
Here's a working fiddle, no more thik lines, noe double borders in chrome: https://jsfiddle.net/Hoargarth/kh7fyegk/
Edit: I forgot to mention, that i also changed border: thin solid black; to border: 1px solid black; inside the fiddle, to remove the thick lines in chrome.
add border-collapse: collapse; in table class
.square {
float:left;
position: relative;
width: 25%;
padding-bottom : 25%;
margin:0%;
overflow:hidden;
}
.content {
position:absolute;
height:100%;
width:100%;
padding: 0%;
}
.table{
display:table;
height:100%;
width:100%;
padding: 0%;
margin: 0%;
border-collapse: collapse;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
padding: 0%;
margin: 0%;
border: thin solid black;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
If you remove the position: relative from the .square and add the height to .content does it solve your problem ?
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
I'm new-ish to flexbox and trying to vertically align my .calendar-arrow elements on the far left and right, respectively, within their own columns. I tried absolutely positioning them, but then they either sat outside of my 1280px margins or were too close to the margins and calendars. Ideally, I'd like to achieve a layout that includes the arrows in their own vertically aligned flexbox columns. For example, the left arrow should sit around the left 6 and the right arrow around the right 12.
* {
box-sizing: border-box;
}
section {
max-width: 1280px;
}
#event-calendar {
margin: 0 auto;
padding: 0 1%;
overflow: auto;
}
#event-calendar h1 {
padding-bottom: 15px;
text-align: center;
}
#event-calendar #calendar-left {
float: left;
border-right: 1px solid grey;
padding: 30px;
width: 50%;
height: 400px;
}
#event-calendar #calendar-right {
float: right;
padding: 30px;
width: 50%;
height: 400px;
}
#event-calendar .table .table-row .table-cell {
font-size: 2em;
color: grey;
}
#event-calendar .table .table-row.table-header .table-cell {
color: grey;
}
.table {
display: flex;
position: relative;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height: 250px;
}
.table .table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
}
.table .table-row .table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.table .table-row .event-on {
position: relative;
}
.table .table-row .event-on::before {
position: absolute;
z-index: -9;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 100%;
width: 35px;
height: 35px;
content: '';
background-color: orange;
}
.calendar-arrow a {
font-size: 2em;
}
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="calendar-arrow">
<a class="icon-arrow-left" href="#">←</a>
</div>
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
<div id="calendar-right">
<div id="calendar-right-cont">
<h1>January 2017</h1>
<div class="table">
<div class="calendar-arrow">
<a class="icon-arrow-right" href="#">→</a>
</div>
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</section>
Pen: http://codepen.io/ourcore/pen/LbvvyG?editors=1100#0
Thanks!
Here's the code. since it's scss, so it won't run here. Here's the working pen
* {
box-sizing: border-box;
}
section {
max-width: 1280px;
}
#event-calendar {
margin: 0 auto;
padding: 0 1%;
overflow: auto;
h1 {
padding-bottom: 15px;
text-align: center;
}
#calendar-left {
float: left;
border-right: 1px solid grey;
padding: 30px;
width: 50%;
height: 400px;
}
#calendar-right {
float: right;
padding: 30px;
width: 50%;
height: 400px;
}
.table {
.table-row {
.table-cell {
font-size: 2em;
color: grey;
}
}
.table-row.table-header {
.table-cell {
color: grey;
}
}
}
}
.table {
display: flex;
position: relative;
flex-flow: column nowrap;
box-pack: justify;
// margin:0 auto;
justify-content: space-between;
// width: 96%;
height: 250px;
.table-row {
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
.table-cell {
display: flex;
padding: 5px;
flex-flow: row nowrap;
flex-grow: 1;
flex-basis: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
justify-content: center;
}
.event-on {
position: relative;
&::before {
position: absolute;
z-index: -9;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 100%;
width: 35px;
height: 35px;
content: '';
background-color: orange;
}
}
}
}
.calendar-arrow {
a {
font-size: 2em;
// width:3%;
// position:absolute;
// top:45%;
}
}
.event-calendar{
// display:flex;
// flex-direction:row;
// align-items:center;
}
a.icon-arrow-left{
// left:2%;
}
a.icon-arrow-right{
// right:5%;
}
.table{
width:100%;
margin:0 auto;
}
.toFlex{
margin:0;
padding:0;
display:flex;
flex-direction:row;
}
.calendar-arrow{
width:35px;
flex-shrink:0;
align-items:center;
display:flex;
}
.toFlex1{
margin:0;
padding:0;
flex-grow:1;
flex-shrink:0;
}
<section id="event-calendar">
<div id="calendar-left">
<div id="calendar-left-cont">
<h1>December 2016</h1>
<div class="table">
<div class="toFlex">
<div class="calendar-arrow">
<a class="icon-arrow-left" href="#">←</a>
</div>
<div class="toFlex1">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell event-on">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="calendar-right">
<div id="calendar-right-cont">
<h1>January 2017</h1>
<div class="table">
<div class="toFlex">
<div class="toFlex1">
<div class="table-row table-header">
<div class="table-cell">S</div>
<div class="table-cell">M</div>
<div class="table-cell">T</div>
<div class="table-cell">W</div>
<div class="table-cell">T</div>
<div class="table-cell">F</div>
<div class="table-cell">S</div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">7</div>
<div class="table-cell">8</div>
<div class="table-cell">9</div>
<div class="table-cell">10</div>
<div class="table-cell">11</div>
<div class="table-cell">12</div>
</div>
<div class="table-row">
<div class="table-cell">13</div>
<div class="table-cell">14</div>
<div class="table-cell">15</div>
<div class="table-cell">16</div>
<div class="table-cell">17</div>
<div class="table-cell">18</div>
<div class="table-cell">19</div>
</div>
<div class="table-row">
<div class="table-cell">20</div>
<div class="table-cell">21</div>
<div class="table-cell">22</div>
<div class="table-cell">23</div>
<div class="table-cell">24</div>
<div class="table-cell">25</div>
<div class="table-cell">26</div>
</div>
<div class="table-row">
<div class="table-cell">27</div>
<div class="table-cell">28</div>
<div class="table-cell">29</div>
<div class="table-cell">30</div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
<div class="calendar-arrow">
<a class="icon-arrow-right" href="#">→</a>
</div>
</div>
</div>
</div>
</div>
</section>