Trying to make a responsive website for mobile/pc, and not sure what the best way is to design a mailto link.
Tried the answers found on StackOverflow and haven't been able to fill the div area with the link, aka make the entire space clickable.
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
line-height: 1.8em;
color: #5D6063;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.contact {
background-color: #bdbdbd;
}
#contact a {
display: block;
height: 100%;
}
<body>
<div class='page'>
<div class='section contact'>
Contact Me
</div>
I was expecting the #contact a {" to fill the ".contact div, but it's not, and I don't know how to just make the whole .contact div a link without screwing up the responsive styling.
Wrap the div with a tag to make the entire div block act as a link.
<a href="mailto:test#example.com?Subject=Website%20Contact"
target="_blank">
<div class='section contact'>
Contact Me
</div>
</a>
Try Following I just change the #contact a to .contact a and few code adjustment.
<!DOCTYPE html>
<html>
<head>
<title>Click Able Div Container</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
line-height: 1.8em;
color: #5D6063;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.contact {
background-color: #bdbdbd;
}
.contact a {
display: block;
width: 100%;
padding: 150px 0;
text-align: center;
}
</style>
</head>
<body >
<div class='page'>
<div class='section contact'>
Contact Me
</div>
</body>
</html>
Related
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.
Could not yet find this exact issue that I am having addressed, so it here goes:
I am trying to create a nav bar with a heading on the left-hand side, and some nav items on the right. I also want the nav to be centered on the page, with a width of 960px. I am trying to accomplish 2 additional things:
1.) The nav bar should be fixed to the top so that it does not disappear when you scroll.
2.) The spacing between the heading and the nav items should be the first to disappear when you minimize the screen. Currently, the items do not flex at all.
I am able to get one of these two things accomplished at a time, but not both at the same time. Any help would be most welcome, thank you.
html {
font-family: helvetica;
font-size: 18px;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.banner {
background-color: aqua;
opacity: .5;
border-radius: 10px;
position: fixed;
}
.header {
display: flex;
justify-content: space-between;
height: 4rem;
align-items: center;
width: 960px;
}
.container .banner .header h1 {
margin-left: 2.5rem;
}
.container .banner .header .nav ul {
display: flex;
width: 200px;
justify-content: space-between;
text-decoration: none;
margin-right: 2.5rem;
}
.container .banner .header .nav ul a {
color: black;
list-style-type: none;
text-decoration: none;
}
<div class="container">
<div class="banner">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li>doggy</li>
<li>puppy</li>
<li>toys</li>
</ul>
</div>
</div>
</div>
</div>
You can use align-items: left for your heading and align-items: right instead of using margin
* {
padding: 0;
margin: 0;
}
html {
font-family: helvetica;
font-size: 18px;
}
.container .header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
height: 4rem;
align-items: center;
width: 100%;
position: fixed;
background: aqua;
opacity: .7;
border-radius: 10px;
}
.container .header .nav ul li {
display: inline-flex;
}
<!DOCTYPE html>
<html>
<head>
<title>My Puppy</title>
<link href="./resources/reset.css" type="text/css" rel="stylesheet">
<link href="./resources/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li>doggy</li>
<li>puppy</li>
<li>toys</li>
</ul>
</div>
</div>
</div>
</body>
In your css file:
remove in .header
.header {
width: 960px;
}
add in .banner
.banner {
max-width: 960px;
width: 100%;
}
I'm trying to create a rock, paper, scissors game and I'm having trouble getting the items to stack. I have three images on one row and I would like to display the fourth image below them (this image would be the resulting image displaying either rock, paper or scissors).
I tried using flex-wrap, changing width's, etc and after an hour of searching, I figured I'll just ask you guys who will probably solve it in a minute lol Here is my code and thanks in advance for the help :D
#import url("https://fonts.googleapis.com/css?family=Germania+One");
$primary-color: #000000;
$serif: "Germania One",
cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
img {
height: 12rem;
padding: 20px;
&:hover {
height: 13rem;
}
}
}
#rock,
#paper,
#scissor {
display: flex;
justify-content: center;
border-radius: 20px;
cursor: pointer;
}
#scissor {
margin-left: 30px;
padding-left: 10px;
color: green;
}
p {
font-size: 4rem;
width: 100%;
height: auto;
margin-top: 200px;
display: flex;
justify-content: center;
}
#rock_win,
#paper_win,
#scissor_win {
justify-content: center;
width: 50%;
height: auto;
flex-wrap: wrap;
border-radius: 20px;
cursor: pointer;
}
#scissor_win {
margin-left: 30px;
padding-left: 10px;
}
<h1>Rock, Paper, Scissor's</h1>
<h2>Choose your fate</h2>
<div class="container">
<div class='items'>
<div id='rock'><img src='https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_rock1600.png' /> </div>
<div id='paper'><img src="https://maxcdn.icons8.com/Share/icon/Hands//hand1600.png" /> </div>
<div id='scissor'><img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png" /> </div>
</div>
<div id='scissor_win'><img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png" /> </div>
</div>
<p></p>
The display: flex; setting needs to be applied to the container/parent element, not to the flex-items/children.
Since you have a structure of .container as a container for items and #scissor_win, and items again contains three items-to-be stacked, the CSS rules should (partly) look like this:
.container {
display: flex;
flex-direction: column;
}
.items {
display: flex;
flex-direction: column;
}
The single items don't need display: flex, unless you want to center their contents using flex.
Make sure you close your img's. They are missing the ending bracket.
The display: flex goes on the container, and the children all get a flex assigned to them (Flex Guide).
I added the SASS tag, since it seems you're using that
$primary-color: #000000;
$serif: "Germania One", cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
img {
height: 12rem;
padding: 20px;
&:hover {
height: 13rem;
}
}
}
.items {
display: flex;
}
#rock,
#paper,
#scissor {
flex: 1;
/* justify-content: center; */
border-radius: 20px;
cursor: pointer;
}
#scissor {
color: green;
}
p {
font-size: 4rem;
width: 100%;
height: auto;
margin-top: 200px;
display: flex;
justify-content: center;
}
#rock_win,
#paper_win,
#scissor_win {
margin: 0 auto;
clear: both;
width: 50%;
height: auto;
border-radius: 20px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Rock, Paper, Scissors</h1>
<h2>Choose your fate</h2>
<div class="container">
<div class='items'>
<div id='rock'>
<img src='https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_rock1600.png'>
</div>
<div id='paper'>
<img src="https://maxcdn.icons8.com/Share/icon/Hands//hand1600.png">
</div>
<div id='scissor'>
<img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png">
</div>
</div>
<div id='scissor_win'>
<img src="https://maxcdn.icons8.com/Share/icon/ios7/Hands//hand_scissors1600.png">
</div>
</div>
<p></p>
</body>
</html>
I'm having trouble posting my inline code here with SCSS, so here's a jsbin link in addition. jsbin
using #kauffee000 snippet, I reduced the amount of css required.
Hope it helps.
explanation:
the trick here is to make .container be a flex and have a flex-direction of column, while .items be flex with a flex-direction of row.
$primary-color: #000000;
$serif: "Germania One", cursive;
html {
background: #4d1c17;
font-size: 66%;
}
h1 {
font-size: 4rem;
text-align: center;
margin-top: 100px;
}
h2 {
text-align: center;
font-size: 3rem;
}
h1,
h2 {
color: $primary-color;
font-family: $serif;
}
.container {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
img {
height: 13rem;
}
}
.items {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
& div {
border-radius: 20px;
flex: 1;
&:hover {
img {
height: 5rem;
}
}
}
}
https://codepen.io/Champion36O/pen/MoyyMv
What do I have to do in order to get .body element to stretch and take up the all available space in the wrapper? Basically, I want to see footer at the bottom of the container. I thought to add the flex-grow property would do the trick but nope..
<html>
<head>
<meta charset="utf-8">
<title> Learning Flexbox </title>
<link rel="stylesheet" href="flexbox.css">
</head>
<body>
<h1> CSS Flexbox Practical Examples </h1>
<div class="example">
<h2>3 Column layout</h2>
<div class="example-page example-layout">
<header>Header</header>
<div class="body">
<div class="col1"> Main Content </div>
<div class="col2"> Navigation </div>
<div class="col3"> Sidebar </div>
</div>
<footer> Footer </footer>
</div>
</div>
</body>
</html>
h1 {
text-align: center;
}
.example-page {
min-height: 45px;
padding: 2em;
}
.example {
border: 2.5px solid black;
}
h2 {
text-align: center;
font-size: 1em;
margin: 0;
padding: 0;
background-color: black;
color: white;
}
.example-layout {
display: flex
flex-direction: column;
height: 300px;
}
header, footer {
padding: 20px;
background: #666;
color: white;
}
.body {
display: flex;
flex-grow: 1;
}
Missing Semicolon
.example-layout {
display: flex;
flex-direction: column;
height: 300px;
}
I recommend that you read this good guide about the flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I corrected your code below. flex should be applied to the container.
I also added a box-sizing: border-box to all the elements, that will really help with sizing them. Other than that you should avoid using .body as a class name, as it's already an HTML tag, that can lead you to mistakes in the future.
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.example-page {
min-height: 45px;
padding: 2em;
}
.example {
border: 2.5px solid black;
}
h2 {
text-align: center;
font-size: 1em;
margin: 0;
padding: 0;
background-color: black;
color: white;
}
.example-layout {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
}
header, footer {
padding: 20px;
background: #666;
color: white;
}
Thanks for the answers so far. I really appreciate it! However, I found the solution to my problem. I was simply missing the semi-colon after display:flex in .example layout. NOOB error. Thanks again. I'll be more observant next time.
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
}