I'm trying to make a decent navigation bar filled with a logo image however the text refuses to utilize any vertical height and I need the text-box to utilize 100% of it's vertical height
As you can see in the image, the textbox is only clickable within that border and it isn't using any vertical height which I want it to use
#import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
.navigation-bar {
padding: 3px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #e31f1f;
}
.navigation-item {
height: 100%
margin: 5px;
border: 1px solid #4848b9;
flex: 1 1 35em;
font-size: 15px;
font-family: "Montserrat", sans-serif;
text-decoration: none;
color: #000000;
}
.navigation-item a {
overflow: hidden;
float: none;
}
.navigation-item a:hover {
}
.current-item {
}
.logo {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>heading</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="navigation-bar">
<div><a class="current-item navigation-item" href="home.html">Home</a></div>
<div><a class="navigation-item" href="contact-us.html">Contact Us</a></div>
<div><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" height=128 alt="logo" class="logo navigation-item" /></div>
<div><a class="navigation-item" href="about-us.html">About Us</a></div>
<div><a class="navigation-item" href="gallery.html">Gallery</a></div>
</div>
</body>
</html>
You can use grid for your container to make the row occupy exactly 1fr. After that just add flexbox to your div's that are directly below your parent container to enable flex-grow on your navigation-item or <a> tags. After that it's just a matter of centering the text vertically and horizontally inside the navigation-item. See the snippet below, if it's what's you're looking for.
#import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navigation-bar {
padding: 3px;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(5, 1fr);
background-color: #e31f1f;
}
.navigation-item {
border: 1px solid #4848b9;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
font-family: "Montserrat", sans-serif;
text-decoration: none;
color: #000000;
}
.navigation-bar > div{
display: flex;
justify-content: center;
text-align: center;
}
.navigation-item a:hover {}
.current-item {}
.logo {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>heading</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="navigation-bar">
<div><a class="current-item navigation-item" href="home.html">Home</a></div>
<div><a class="navigation-item" href="contact-us.html">Contact Us</a></div>
<div><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" height=128 alt="logo" class="logo navigation-item" /></div>
<div><a class="navigation-item" href="about-us.html">About Us</a></div>
<div><a class="navigation-item" href="gallery.html">Gallery</a></div>
</div>
</body>
</html>
Related
Making a navigation bar.
On large screens, everything looks like I need.
The problem with small screens.
When a screen decreases, Flex children should be clinging to the left edge. But this does not happen. They are centered.
This is how it looks like on my screen:
I need it to look like this:
Media requests and other use cannot be used. Task condition: only flexs and nothing more.
So how can I get the same effect as in the picture?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background: black;
font-weight: bold;
padding: 8px 8px;
}
.footer-name {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.footer-nav-item {
margin-left: 10px;
}
.footer-nav-item:hover {
border-bottom: 2px white dashed;
}
.footer-button {
font-size: 7px;
background: inherit;
border: 1px solid white;
padding: 7px 7px;
font-weight: bold;
border-radius: 4px;
}
.footer-button:hover {
background: white;
color: black;
}
.white {
color: white;
}
.footer-margin {
margin: 8px 8px;
}
<!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="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Flex navigation</title>
</head>
<body>
<footer class="footer">
<a class="footer-name footer-margin white" href="#">Rio Coffee</a>
<nav class="footer-nav footer-margin">
<a class="footer-nav-item white" href="#">HOME</a>
<a class="footer-nav-item white" href="#">ABOUT</a>
<a class="footer-nav-item white" href="#">SERVICES</a>
<a class="footer-nav-item white" href="#">MENU</a>
</nav>
<button class="footer-button footer-margin white">CONTACT</button>
</footer>
</body>
</html>
I think the closest you will get if you are not allowed to use media queries is to use space-between instead of space-around.
The difference is that the free space is distributed between elements only, not including the left and right extreme sides:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background: black;
font-weight: bold;
padding: 8px 8px;
}
.footer-name {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.footer-nav-item {
margin-left: 10px;
}
.footer-nav-item:hover {
border-bottom: 2px white dashed;
}
.footer-button {
font-size: 7px;
background: inherit;
border: 1px solid white;
padding: 7px 7px;
font-weight: bold;
border-radius: 4px;
}
.footer-button:hover {
background: white;
color: black;
}
.white {
color: white;
}
.footer-margin {
margin: 8px 8px;
}
<!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="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Flex navigation</title>
</head>
<body>
<footer class="footer">
<a class="footer-name footer-margin white" href="#">Rio Coffee</a>
<nav class="footer-nav footer-margin">
<a class="footer-nav-item white" href="#">HOME</a>
<a class="footer-nav-item white" href="#">ABOUT</a>
<a class="footer-nav-item white" href="#">SERVICES</a>
<a class="footer-nav-item white" href="#">MENU</a>
</nav>
<button class="footer-button footer-margin white">CONTACT</button>
</footer>
</body>
</html>
The way I would combat this is:
Try using mobile first. This means your putting your css for mobile and then adding desktop on top of the mobile styling. If you're unsure about this, look at media queries in CSS (https://www.w3schools.com/css/css3_mediaqueries.asp)
By default display: flex; will wrap content (if it exceeds the limit, it will go onto a new line) and will use row as the default direction
If you remove the justify-content: space-around and change it for justify-content: flex-start; it will all be left aligned (flex-end will right align) so you could do a media query for this.
All i've done is added a desktop/tablet breakpoint using a media query and set the .footer's justify-content to flex-start
Hope this helps explain a little more :)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.footer {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
background: black;
font-weight: bold;
padding: 8px 8px;
}
.footer-name {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.footer-nav-item {
margin-left: 10px;
}
.footer-nav-item:hover {
border-bottom: 2px white dashed;
}
.footer-button {
font-size: 7px;
background: inherit;
border: 1px solid white;
padding: 7px 7px;
font-weight: bold;
border-radius: 4px;
}
.footer-button:hover {
background: white;
color: black;
}
.white {
color: white;
}
.footer-margin {
margin: 8px 8px;
}
/* Desktop styling! */
#media screen and (min-width: 480px) {
.footer { justify-content: space-around; }
}
<!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="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Flex navigation</title>
</head>
<body>
<footer class="footer">
<a class="footer-name footer-margin white" href="#">Rio Coffee</a>
<nav class="footer-nav footer-margin">
<a class="footer-nav-item white" href="#">HOME</a>
<a class="footer-nav-item white" href="#">ABOUT</a>
<a class="footer-nav-item white" href="#">SERVICES</a>
<a class="footer-nav-item white" href="#">MENU</a>
</nav>
<button class="footer-button footer-margin white">CONTACT</button>
</footer>
</body>
</html>
Is there a way I could attain a 2 1 alignment? Trying to achieve this via flexbox, But there doesn't seem to be an option for this directly in flexbox.
I'm looking to achieve the alignment 2 in a row and 1 to the right side aligned to the middle of the 2 as follows.
This is the current outcome with my CSS.
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css">
<title>Card App</title>
</head>
<body>
<div class="container">
<div class="card-group">
<div class="card">
<h4>Collections</h4>
<p>Create Multiple Collections to have everything organized and download in any format you need.</p>
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</body>
</html>
My CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #232737;
color: #8C90A0;
}
.container {
margin: auto;
padding: 20px;
display: flex;
justify-content: center;
}
.card-group {
background-color: #1F2333;
width: 450px;
height: 500px;
padding: 20px;
}
.card {
padding: 20px;
gap: 10px;
background-color: #232737;
height: 150px;
width: 350px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
I added a div in you html and a couple of classes, and changed the css a bit:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #232737;
color: #8C90A0;
}
.container {
margin: auto;
padding: 20px;
display: flex;
justify-content: center;
}
.card-group {
background-color: #1F2333;
width: 450px;
height: 500px;
padding: 20px;
}
.card {
padding: 20px;
gap: 10px;
background-color: #232737;
height: 150px;
width: 350px;
display: flex;
justify-content: space-around;
}
.content h4{
margin-bottom: 20px;
color: #DDDDDD;
}
.arrow{
align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css">
<title>Card App</title>
</head>
<body>
<div class="container">
<div class="card-group">
<div class="card">
<div class="content">
<h4>Collections</h4>
<p>Create Multiple Collections to have everything organized and download in any format you need.</p>
</div>
<i class="fa fa-angle-right arrow"></i>
</div>
</div>
</div>
</body>
</html>
I would like to get this result below:
Example
My problem is that, I don't understand why my blocks are not centered correctly even with the propriety display: inline-block in my selector homebotblock1?
I tried this:
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</body>
</html>
You need to wrap the homebottxt1 and homebottxt2 text in its own <div> then wrap that <div> and the image in another <div> with the class homebotblock3.
Then add this CSS:
.homebotblock3 {
display: flex;
}
.homebotblock3 > div {
margin-left: 20px;
}
Modified Code
JSFiddle: https://jsfiddle.net/Zeraora/gefhov6b/
* {
margin: 0;
padding: 0;
}
.homebot {
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
min-height: 500px;
display: inline-block width:100%;
}
.homebotbg {
background-color: rgba(255, 255, 255, 0.7);
min-height: 500px;
display: block;
width: 43%;
float: right;
padding: 100px 50px 50px 30px;
text-shadow: #fff 1px 1px 0px;
text-align: left;
}
.homebottit {
font-size: 24pt;
font-family: roboto;
color: #c22312;
text-transform: uppercase;
margin-bottom: 50px;
display: inline-block;
}
.homebotpad {
padding-left: 10px;
}
.homebottxt1 {
font-size: 16pt;
font-family: roboto;
color: #000;
}
.homebottxt2 {
font-size: 10pt;
font-family: open sans2;
color: #000;
}
.homebotblock1 {
width: 80px;
display: inline-block;
}
.homebotblock2 {
width: 450px;
display: inline-block;
}
.homebotblock3 {
display: flex;
}
.homebotblock3>div {
margin-left: 20px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="homebotblock3">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
.homebot{
background: url('https://zupimages.net/up/20/21/9zj3.jpg');
background-size: 100% auto;
background-position-x: center;
background-position-y: -100px;
height: 25vw;
display: block;
position: relative;
}
.homebotbg {
position: relative;
left: 40%;
width: 60%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
padding: 10px 30px;
display: flex;
flex-direction: column;
align-content: flex-end;
}
.homebot-header {
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.homebottit {
color: red;
font-size: 24px;
}
.homebot-footer {
flex-basis: 50%;
display: flex;
align-items: center;
}
.homebotblock1 {
margin-right: 15px;
}
.homebottxt1 {
font-size: 18px;
margin-bottom: 5px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<div class="homebot-header">
<p class="homebottit">Security Investment Solutions</p>
</div>
<div class="homebot-footer">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebot-footer-right">
<p class="homebottxt1">ADVANTAGEOUS CONDITIONS</p>
<p class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can design like this.
The key point here is to use flex layout.
Using flex layout by display: flex, you can make this structure easily.
Since you are applying inline-block to the image separately, it is not horizontally aligning the image to any other element in the page.
To achieve your result, you will need to create a div structure that suits your needs and then apply your property.
Also, use flex instead of inline-block, it's much powerful. I have modified your code to achieve your result.
P.S. Kindly add in a padding as per your need. Since it is not the objective of the question, I have not included it in my answer.
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.block{
display: flex;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="block">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm having some trouble with the width of the li elements and the size of my text.
I'm using text-size-adjust to make text readable on mobile, the li height grows with the text but not the width, it stays at the text original size. So the texts overlap.
* { text-size-adjust: 200%; }
#navigation{
background-color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25)
}
#navigation ul{
display: flex;
}
#navigation a{
color: black;
text-decoration: none;
font-size: 25px;
}
#navigation a:visited{
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BASE</title>
<link rel="stylesheet" href="../styles/backgradient.css" />
<link rel="stylesheet" href="../styles/base.css" />
<link rel="stylesheet" href="../styles/navigation.css" />
</head>
<body>
<nav id="navigation">
<ul>
<li>Projets</li>
<li>Réseaux</li>
</ul>
<a>変態 白雪</a>
</nav>
<div id="content">
</div>
</body>
</html>
since you have an issue with the text not being adjusted with the screensize, first you have to remove the font size defined within the class, then add the font size to * {} class by defining the size with vw (viewport width). That way the text size will follow the size of the browser window. Try the following example and see. For more information please check w3 documentation. https://www.w3schools.com/howto/howto_css_responsive_text.asp
* {
font-size-adjust: 200%;
font-size:4.5vw;
}
#navigation {
background-color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25)
}
#navigation ul {
display: flex;
}
#navigation a {
color: black;
text-decoration: none;
}
#navigation a:visited {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BASE</title>
<link rel="stylesheet" href="../styles/backgradient.css" />
<link rel="stylesheet" href="../styles/base.css" />
<link rel="stylesheet" href="../styles/navigation.css" />
</head>
<body>
<nav id="navigation">
<ul>
<li>Projets</li>
<li>Réseaux</li>
</ul>
<a>変態 白雪</a>
</nav>
<div id="content">
</div>
</body>
</html>
So I'm trying to recreate this template for practice:
https://blackrockdigital.github.io/startbootstrap-agency/
I have a link to codepen for the code. I hope that's okay:
https://codepen.io/wmufunde/pen/geQaWg
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Bootstrap</title>
<!-- <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Start Bootstrap</li>
<li>Services</li>
<li>Portfolio</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
<div id = "welcome">
<h2>Welcome to our Studio!</h2>
<h1>It's nice to Meet you!</h1>
<button>Tell me More</button>
</div>
</header>
Services
Lorem ipsum dolor sit amet consectetur.
<div class = "row">
<div class = "col">
<h3>Features</h3>
</div>
<div class = "col">
<h3>Easy to Learn and Design</h3>
</div>
<div class = "col">
<h3>Boostrap 3</h3>
</div>
</div>
</body>
</html>
html, header {
height: 100%;
}
header {
background-image: url(/portfolio-practice/img/flowers.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
header h1, h2 {
/* text-align: center;
vertical-align: middle;
line-height: 90px; */
}
button {
text-align: center;
display: inline-block;
vertical-align: middle;
background-color: #fed136;
border-color: black;
border-radius: 2px;
color: black;
border-style: solid;
padding: 10px;
font-family:sans-serif, 'Comic sans';
}
#welcome {
display: flex;
align-items: center;
justify-content: center;
}
nav {
background: #212529;
box-shadow: 0 1px 4px rgba(0,0,0,.4);
width: 100%;
top: 0;
}
li {
display: inline-block;
margin-left: 15px;
}
I managed to align the text just fine without flexbox earlier with the commented out code, but I was informed that I'd have to use flexbox for the button to align in the center. Is this true? If so how do I get it to work correctly? It's been a while since I've used flexbox. Would it be easier to use absolute positioning?
What I want is to get the h1, h2 and button each on a new line. How do I do that please?
You need to set flex-direction: column. Please update your css for id='welcome' as bellow,
#welcome {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}