I have four divs on my page and each one of them has a link. The problem is, I want the links to be the same width and height as the boxes, but for some reason the links stretch more than they should, and as a result the whole container which contains the four divs is clickable.
I've tried setting the anchor tags to display:inline-block; but that didn't work.
How do I fix this?
Codepen
EDIT: Fixed it by wrapping the anchor tags in divs.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--nav-clr: #ebebeb;
--box-r: #f94144;
--box-g: #43AA8B;
--box-y: #F9C74F;
--box-b: #577590;
}
body,
html {
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
/* nav bar */
nav {
display: flex;
height: 60px;
background-color: var(--nav-clr);
align-items: center;
}
.logo {
width: 150px;
height: auto;
margin-left: 1em;
}
/* buttons */
.box-btn {
/* margin: 20px; */
width: auto;
height: 259px;
background: #43AA8B;
border-radius: 30px;
position: relative;
}
.box-btn::after {
content: '';
position: absolute;
display: inline-block;
/* margin: 20px; */
width: 100%;
bottom: 0;
rightt: 0;
height: 100px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
background: var(--nav-clr);
z-index: 1;
}
.content {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 250px);
gap: 20px;
/* background-color: red; */
}
/* main */
.main-wrapper {
height: 100vh;
display: grid;
justify-content: center;
grid-template-columns: 80vw;
grid-template-rows: 25% 5% 65%;
/* gap: 20px; */
}
/* header */
.title-wrapper {
margin: 70px;
display: inline-block;
font-size: 1.3em;
text-align: center;
grid-row: 1/3;
}
/* SMALLER SCREENS */
#media screen and (max-width:700px) {
.title-wrapper {
font-size: 1em;
margin: auto;
}
nav {
justify-content: center;
}
}
#media screen and (max-width:626px) {
.content {
grid-template-columns: repeat(auto-fit, 350px);
}
.box-btn {
height: 350px;
}
.box-btn::after {
width: 100%;
height: 135px;
bottom: 0;
}
}
#media screen and (max-width:405px) {
.title-wrapper {
font-size: .8em;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>T3 Dashboard</title>
</head>
<body>
<div class="wrapper">
<nav>
<a href="http://t3-ks.com/">
<div class="logo-container">
<img src="/t3s.svg" alt="" class="logo">
</div>
</a>
</nav>
<main>
<div class="main-wrapper">
<div class="title-wrapper">
<h1>Menaxhimi i burimeve njerëzore</h1>
</div>
<div class="content">
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
</div>
</div>
</main>
</body>
</html>
I tried to change some css in the grey area. Is this what you want? If you want an element to be on the bottom, you can set bottom: 0; to its css when positioned absolute.
I would add to your most external container the css property pointer-events: none and to the internal one pointer-events:all. If what you want is not giving click feature to the external containers, this might solve the issue.
.content > a {
pointer-events: none;
}
.box-btn {
pointer-events: all;
}
Related
At first, the icons and label are centred correctly. But I need to make the anchor display: inline-block; to make the clickable area the full size of the grid it is in. Only the label itself is centred, while the icon is above the label.
I tried using vertical-align: middle; and align-items: centre;.
How can I make the icon and label vertically aligned?
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#600&display=swap');
body {
display: grid;
grid-template-rows: 15% 70% 15%;
grid-auto-columns: 1fr 1fr;
gap: 0% 0%;
margin: 0;
padding: 0;
font-family: 'Quicksand', sans-serif;
background-color: rgb(224, 224, 224);
height: 100vh;
}
#header {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: "back welcome logout";
grid-area: 1 / 1 / 2 / 2;
position: fixed;
width: 100%;
height: 15%;
background-color: rgb(255, 255, 255);
align-items: center;
text-align: center;
}
#back {
grid-area: back;
}
#welcome {
grid-area: welcome;
}
#logout {
grid-area: logout;
}
#content {
grid-area: 2 / 1 / 3 / 2;
}
#footer {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: "home contact";
grid-area: 3 / 1 / 4 / 2;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
height: 15%;
background-color: rgb(255, 255, 255);
}
#home {
grid-area: home;
}
#contact {
grid-area: contact;
}
/* centre alignment for icon and label */
#back,
#logout,
#home,
#contact {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: rgb(58, 58, 255);
display: inline-block;
width: 100%;
height: 100%;
}
/* clickable size for icon and label */
#header a,
#header span,
#footer a,
#footer span {
font-size: 1.5em;
text-decoration: none;
}
/* hover for icon and label */
#header a:hover,
#footer a:hover {
background-color: rgb(216, 237, 255);
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
</head>
<body>
<div id="header">
<a href="#" id="back">
<span class="material-symbols-outlined">
arrow_back
</span><br/> Back
</a>
<h1 id="welcome">Timeline</h1>
<a href="#" id="logout">
<span class="material-symbols-outlined">
logout
</span><br/> Logout
</a>
</div>
<div id="content">
<p>hello</p>
</div>
<div id="footer">
<a href="#" id="home">
<span class="material-symbols-outlined">
home
</span><br> Home
</a>
<a href="#" id="contact">
<span class="material-symbols-outlined">
chat
</span><br> Contact
</a>
</div>
</body>
</html>
You should use flexbox when it comes to alignment of items. It's easy to use, and super useful when you completely control it.
You should take a look at the documentation here
First, you need to correct the HTML structure of the <a>s.
Remove the <br> tags and put the labels in their own <span>s.
<a href="#" id="home">
<span class="material-symbols-outlined">
home
</span>
<span>Home</span>
</a>
Now their styling is easier. The following properties are what you need to set for the links' rule:
Change display: inline-block to display: flex.
display: flex will make the <a>s hold the <span>s in a responsive container while assuming a block level element role that sits nicely in the width computed for it.
flex-direction: column will stack the <span>s vertically.
justify-content: center to center items vertically.
In vertical placement (i.e flex-direction: column), the align-items and justify-content properties get swapped because you are changing the main axis from horizontal to vertical. For this, we use justify-content: center rather than align-items: center to center the items vertically.
You may get rid of the other properties as they are not necessary and introduce problems and unneeded complexity.
The new rule set:
#back,
#logout,
#home,
#contact {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
color: rgb(58, 58, 255);
border: 1px solid;
}
Because the icons and labels are now in different <spans>, you can style them to take up full width and derive their height from their own content like this:
#back span,
#logout span,
#home span,
#contact span {
display: block;
width: 100%;
height: auto;
}
I also noticed that your header bar would change its height, getting shorter with screen resize while I opened dev tools, so you may correct this by setting a fixed height rather than a percentage height.
#header {
...
height: 100px;
...
}
Personally, I prefer to use flex when it is about trying to align vertically. Here you have an example on how to use it:
div {
margin-bottom: 10px
}
.vertical {
display: flex;
align-items: center;
height: 175px;
width: 175px;
background-color: yellow;
}
.horizontal {
display: flex;
justify-content: center;
height: 175px;
width: 175px;
background-color: red;
}
.both {
display: flex;
justify-content: center;
align-items: center;
height: 175px;
width: 175px;
background-color: blue;
color: white;
}
<div class="vertical">
vertical
</div>
<div class="horizontal">
horizontal
</div>
<div class="both">
horizontal and vertical
</div>
I'm a beginner Web Developer who is currently working on my first responsive website. I’ve run into an issue with my dropdown menu where the width (which I want to cover the whole screen) begins to reduce when the screen size passes a certain threshold (484 pixels or less). I had a similar issue in other areas of my site that after some research I was able to fix by adding “mid-width: fit-content;” to my HTML ruleset, but it doesn’t seem to be helping the dropdown. Any idea what could be causing this? I’ve been unable to find a cause or solution so any advice would be greatly appreciated.
Below is a simplified version of my code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>A Website</title>
<link rel="stylesheet" href="./styles/MenuTestCSS.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header>
<div class="flexContainer">
<div id="logoBox">
<h2 id="logo">Website</h2>
</div>
<nav>
<ul id="menu" class="flexContainer">
<li class = "navLink"><a href="" >Link</a></li>
<li class = "navLink">Link</li>
<li class = "navLink">Link</li>
<li class = "navLink">Link</li>
</ul>
<div class="flexContainer">
<div id="menuToggle">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</nav>
</div>
</header>
</body>
</html>
/* GENERAL STYLES */
html {
box-sizing: border-box;
min-width: fit-content;
}
body {
width: 100%;
}
*, *::before, *::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.flexContainer{
display: flex;
flex-flow: row wrap;
}
/* HEADER STYLES */
header {
color: white;
background-color: #485696;
height: auto;
}
header .flexContainer {
align-items: center;
height: 100%;
width: 100%;
}
header h2 {
font-size: 48px;
margin: 20px 0;
padding-left: 25px;
}
nav {
align-self: stretch;
width: 485px;
}
nav .flexContainer {
justify-content: space-around;
}
header a, header a:visited {
color: white;
text-decoration: none;
font-size: 26px;
}
header li {
display: inline-block;
}
#menuToggle {
width: 45px;
height: 50px;
display: none;
}
.square{
width: 45px;
background-color: white;
height: 5px;
}
.square + .square {
margin-top: 10px;
}
nav {
flex: 1 0 0;
}
nav .flexContainer {
justify-content: flex-end;
}
#menuToggle {
margin-right: 3em;
width: 30px;
height: 30px;
display: block;
}
#menu {
background-color:#485696;
position: absolute;
top: 92px;
left: 0%;
height: auto;
padding: 10px 25px;
display: block;
border-top: 4px solid white;
}
.navLink + .navLink {
margin-top: 1em;
}
#menu li {
display: block;
}
.navLink + .navLink {
margin-left: 0px;
}
You've got this issue because you set nav{ width: 485px }
so it's logically will be shrinked when the with is lower than 485px, I notice you to learn about relative lengths such as "%", "rem", "em", "vh"...
so in your case you'll just change the nav { width: 485px } by width: 100%
I am working on a side project of mine where I have an HTML and CSS file. I started working on it from a mobile-first approach and things were looking good. But then I needed to make it a responsive design and added the following tag the CSS broke and did not work properly.
<meta name="viewport" content="width=device-width, initial-scale=1">
:root {
--black: #191414;
--green: #1DB954;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap') * {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background-color: #181818;
}
.container {
display: grid;
grid-template-rows: min-content 8fr 1fr;
background-color: #181818;
width: 100vw;
height: 100vh;
}
.main {
display: grid;
grid-template-columns: min-content 1fr;
}
.music-img {
width: 300px;
height: 300px;
object-fit: cover;
margin: 50px 50px;
}
.music-details {
display: flex;
flex-direction: column;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 35px;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 32px;
height: 32px;
margin: 20px 15px;
}
.list {
overflow: auto;
display: flex;
flex-direction: column;
-ms-overflow-style: none;
scrollbar-width: none;
/* Firefox */
}
.list::-webkit-scrollbar {
display: none;
}
.footer {
background-color: var(--black);
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
}
.song-name {
font-family: 'Roboto', sans-serif;
font-size: 10px;
color: #ffffff;
}
.song-band {
font-family: 'Roboto', sans-serif;
font-size: 8px;
color: #8e8e8e;
}
.song-detail {
margin: 10px 50px;
}
#test {
color: #ffffff;
width: 100px;
height: 100px;
}
#home,
#search,
#library {
width: auto;
height: calc(100vh*0.05);
margin: 30px auto;
}
.song-detail:last-child {
margin-bottom: 25px;
}
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Spotify</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="main">
<div class="img">
<img src="assets/album.jpg" class="music-img"></img>
</div>
<div class=music-details>
<div class="music-name">
Justice Beaver
</div>
<div class="album-name">
The Office
</div>
<div class="play-items">
<span><img src="assets/backward.png" id="backward"></img></span>
<span><img src="assets/play.png" id="play"></img></span>
<span><img src="assets/forward.png" id="forward"></img></span>
<br>
<span><img src="assets/heart.png" id="heart"></img></span>
<span><img src="assets/share.png" id="share"></img></span>
</div>
</div>
</div>
<div class="list">
<div class="song-detail">
<div class="song-name">Celebration</div>
<div class="song-band">KOOL & THE GANG</div>
</div>
</div>
<div class="footer">
<span><img src="assets/home.png" id="home"></img></span>
<span><img src="assets/search.png" id="search"></img></span>
<span><img src="assets/library.png" id="library"></img></span>
</div>
</div>
</body>
</html>
Here is the image before adding the above tag
And here is the image after I added the above tag
I and not sue what is wrong here. Any help would be appreciable.
Thanks
You have some issues in that code. First, you didn´t made the cassette img responsive, because you gave him a px size, then the img can´t resize, it´s static. If you want to make an img responsive, you have to use relative sizes, like "%" or "vw". Then you have to do the same with the icons, or at least add a media query for smaller devices and give them smaller sizes in px.
Same thing applies to the font size, it´s better to work with "em" or "rem", because they are relative sizes.
Then, i don´t know why you added this code
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
Because of the media query, this code only adds red color on devices that are bigger than 768, so tablets and cellphones won't apply
You should use it the simple way
.footer {
background-color: red;
}
I think that´s a good start point to start making it responsive.
You can start by trying to make these changes.
.music-img {
width: 15vw;
height: 15vh;
object-fit: cover;
margin: 50px 50px;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 25px;
height: 25px;
margin: 20px 15px;
}
.footer {
background-color: red;
}
Then I think you would figure it out the rest.
My first time posting and am looking for some help. I am currently taking an assessment and am stumped on the last part. I am making a picture card with an image above and a circle image to the side as well as some text next to the circle image and below this is what it looks like: https://i.gyazo.com/547948a01bd8f045e6a1b90bd79e113a.png
this is how it needs to look:
https://i.gyazo.com/9426e3f060cdd540581f12da474fc8ca.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
#media screen and (min-width: 600px) {
form {
display: grid;
position: relative;
width: 600px;
margin: 0 auto;
}
}
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
Any help would be awesome! Thank you!
Check out the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<div class="container1">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="container2">
<div><h4>Title goes here</h4></div>
<div><p>Secondary text</p></div>
</div>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
Here we used 2 containers, one for row and one for column elements. You can achieve this easily and more effectively with HTML tables.
Next here is the css:
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
border-radius: 25px;
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
height: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
.container1{
height: 40px;
display: flex;
flex-flow: row nowrap;
}
.container2{
display: flex;
flex-flow: column nowrap;
}
/* ************These styles are junk************ */
/* *********Better to use classes n ids********* */
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
/* ************These styles are junk************ */
Here I added border-radius property to the card to make its corner round. Use border-top-left-radius, border-top-right-radius with image to make its top borders round which gives card a neat look. It is important to give height n width to image, thus I added height property to avatar pic. Lastly, both container classes are set to contain rows and column without wrapping respectively, using flex-flow property. Hope it will help you. Peace.
Add a float property to the .avatar_img class
.avatar_img {
float: left;
}
Wrap title__text and secondary__text inside div,
and then wrap avatar__img and title inside flexbox div.
<div class="card-info">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="card-info-title">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
</div>
</div>
.card-info {
display: flex;
align-items: center;
}
.secondary__text > p {
margin-bottom: 0;
}
Here's CodePen link https://codepen.io/azhkuro/pen/WNrXxpd. Hope it helps you
I am trying to vertically position the "Distance" and "Duration" text in the center of their respective divs using flexbox, I can't seem to get it to work. I will also apply this to the "Calories" and "Share" text aswell.
I am also want to use flexbox to evenly space my 4x links vertaically in the middle column.
Codepen demo
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Runna - Track your run!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<div id="main-wrapper">
<div id="head-bar">
<img class="logo" src="imgs/logo-blue.png">
</div>
<div id="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>
<div id="control-container">
<div class="left-col">
<div class="distance-wrapper">
<div class="distance-title bold-title">DISTANCE:</div>
<div class="distance-figure">1.7KM</div>
</div>
<div class="duration-wrapper">
<div class="duration-title bold-title">DURATION</div>
<div class="duration-figure">10.42MINS</div>
</div>
</div> <!-- End of left col -->
<div class="middle-col">
<ul>
<li class="arrow"><i class="fa fa-chevron-down"></i></li>
<li>START</li>
<li>STOP</li>
<li>PAUSE</li>
</ul>
</div>
<div class="right-col">
<div class="calorie-wrapper">
<div class="calories bold-title">CALORIES</div>
<div class="calories-result">100 cal's</div>
</div>
<div class="share-wrapper">
<div class="share bold-title">SHARE</div>
<div class="share-icons">FB or Twitter</div>
</div>
</div> <!-- End of right col -->
</div>
</div>
</body>
</html>
CSS:
html {
box-sizing: border-box;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
height: 100%;
font-family: 'Lato', sans-serif;
}
#main-wrapper {
height: 100vh;
}
#media all and (max-width: 40em) {
#head-bar {
background: black;
width: 100%;
height: 5vh;
}
.logo {
display: block;
margin: 0 auto;
height: 85%;
}
#map-container {
background: yellow;
height: 65vh;
width: 100%;
}
}
/***Control columns***/
#control-container {
width: 100%;
height: 30vh;
color: white;
font-family: 'Lato', sans-serif;
text-align: center;
background: #1b1b1b;
position: relative;
}
.left-col {
display: flex;
flex-direction: column;
width: 33.3%;
height: 100%;
/*height: 60px;*/
float: left;
}
.middle-col {
background: #151515;
width: 33.3%;
height: 100%;
float: left;
/*box-shadow: 0 0 8px 2px #000;*/
}
.right-col {
width: 33.3%;
float: left;
}
.distance-wrapper, .duration-wrapper {
flex: 1;
/*background: #ddd;*/
border-bottom: 1px solid yellow;
justify-content: center;
}
.calorie-wrapper, .share-wrapper {
display: block;
width: 100%;
}
.bold-title {
font-weight: 900;
font-family: 'Lato', sans-serif;
}
/***Middle Navigation***/
.middle-col {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.middle-col ul {
margin: 0;
padding: 0;
display: table;
width: 100%;
}
.middle-col li {
list-style-type: none;
}
.middle-col a {
color: white;
text-decoration: none;
display: block;
padding: 20px;
}
.middle-col a:hover {
background: green;
display: block;
}
#control-container:after {
content: "";
display: block;
height: 0;
clear: both;
}
I created this example with a smaller amount of HTML and, hopefully, greater semantic meaning.
Let's make this:
The HTML
The <section> element for the flex container
The <nav> element is a good container for the actions.
The description list element — <dl> — is a good wrapper for the stats. They have two children:
The Description Term element — <dt> — is used for the stat headings
The Description element — <dd> — is used for the stat value
<section class="control-container">
<dl class="distance">
<dt>Distance</dt>
<dd>1.7KM</dd>
</dl>
<dl class="duration">
<dt>Duration</dt>
<dd>10.42 Mins</dd>
</dl>
<dl class="calories">
<dt>Calories</dt>
<dd>100</dd>
</dl>
<nav class="actions">
Down
Start
Stop
Pause
</nav>
<div class="share">
<h2>Share</h2>
Facebook
Twitter
</div>
</section>
The Flex
The flex <section> container has display: flex and flex-flow: column wrap so its children will layout in columns and wrap when pushed outside.
The flex items are also given display: flex, flex-flow: column wrap and justify-content: center; so that the text is vertically centered. The nav is given flex-direction: row so that its links can be evenly centered vertically with align-items: center
The 4 sections which take up half of the height are given flex: 1 1 50%; they will each get half of a column height
The navigation is given flex: 1 1 100% so it will take up an entire column on its own
.control-container {
display: flex;
flex-flow: column wrap;
}
.control-container > * {
display: flex;
flex-flow: column wrap;
justify-content: center;
flex: 1 1 50%;
width: 33.33%;
text-align: center;
}
.control-container > nav {
flex-direction: row;
align-items: center;
flex: 1 1 100%;
}
.control-container > nav a {
flex: 1 1 100%;
}
Complete Example
* {
margin: 0;
padding: 0;
font: 100% arial;
}
.control-container {
display: flex;
flex-flow: column wrap;
height: 40vh;
min-height: 250px;
min-width: 300px;
margin: 0 auto;
}
.control-container > * { /* target all direct children */
display: flex;
flex-flow: column wrap;
justify-content: center;
flex: 1 1 50%;
width: 33.33%;
text-align: center;
background: #333;
color: #FFF;
}
.control-container > nav {
flex-direction: row; /* allows vertical centering with align-items: center; */
align-items: center;
flex: 1 1 100%; /* take up entire column */
background: #000;
}
.control-container > nav a {
flex: 1 1 100%; /* 100% pushes each link so they wrap */
}
/*Change the order of the flex items so the stats can be kept together in the HTML*/
.distance,
.duration,
.actions {
order: 1;
}
.calories {
order: 3;
}
.share {
order: 4;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.control-container dt,
.control-container h2 {
font-weight: bold;
}
.share h2 {
margin-top: calc(1em + 15px); /*push "share" down so it aligns with "duration" 1em accounts for the extra line of text */
}
.control-container a {
color: #FFF;
text-decoration: none;
}
dt,
dd,
.share * {
padding: 5px;
}
iframe {
width: 100%;
height: calc(60vh - 104px);
/* viewport height minus flex container height and header height ( + there is a stray 4px somewhere)*/
min-height: 300px;
}
header {
height: 100px;
text-align: center;
background: #000;
}
<div class="wrapper">
<header>
<img src="http://www.placehold.it/100" />
</header>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" frameborder="0" style="border:0"></iframe>
<section class="control-container">
<dl class="distance">
<dt>Distance</dt>
<dd>1.7KM</dd>
</dl>
<dl class="duration">
<dt>Duration</dt>
<dd>10.42 Mins</dd>
</dl>
<dl class="calories">
<dt>Calories</dt>
<dd>100</dd>
</dl>
<nav class="actions">
Down
Start
Stop
Pause
</nav>
<div class="share">
<h2>Share</h2>
Facebook
Twitter
</div>
</section>
</div>
So i ended up working it out, I didnt realise you can add the display: flex and flex-direction: column; etc properties again if you have already added them to the main container. Anyway I added the following code to my wrappers and it works:
.distance-wrapper, .duration-wrapper {
flex: 1;
border-bottom: 1px solid yellow;
display: flex; // Important
flex-direction: column; // Important
align-items: center;// Important
justify-content: center; // Important
}