I have been trying to set the .flex-container to cover entire page below the horizontal rule, but when I resize the window, in around 1200px width, the flex box container is not going all the way down. I am fine with the buttons coming as a column when viewing on a small screen, as already happening.
what I want to happen
body {
background-color: #06283D;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.heading {
color: #1894E7;
display: flex;
justify-content: center;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 3.6em;
margin: 5%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
position: relative;
left: 0;
right: 0;
}
.flex-container>button {
background-color: #DFF6FF;
width: 350px;
margin: 6%;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius: 10px;
cursor: pointer;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
transition-duration:0.3s;
}
.flex-container>button:hover {
transform: translateY(-5px);
transition-duration:0.3s;
box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
#media screen and (max-width: 1086px){
.flex-container>button{
margin: 7%;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Papers</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600&family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="public/css/styles.css">
</head>
<body>
<div class="heading">
<h1>Loren ipsum</h1>
</div>
<hr style="margin:0;position: relative;left:-15px;width:100%;height:0.5px;border-width:0;color:gray;background-color:black;opacity:0.5">
<div class="flex-container">
<button>1Year</button>
<button>2Year</button>
<button>3Year</button>
<button>4Year</button>
</div>
</body>
</html>
If you make the styling of the flex-container:
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
Then it will certainly cover the whole page.
I'm not sure I understand the point of using position: absolute, so if that's not requisite, you get rid of position:absolute and instead change it to height: 100vh, it'll stretch to be equal to the vertical height of the viewport. If 100vh is too tall, you can change it accordingly.
Another option would be to give the body a dynamic height like 100vh (which will force the entire page to be exactly the height of the viewport) and add overflow:hidden to the body. Note, in this scenario if any of the buttons wrap and force the parent div to be any larger, you won't be able to scroll to them.
A final option would be to wrap the whole thing in a wrapper div and then make that div display: flex; see here: https://jsfiddle.net/slingtruchoice/jc03nft2/
Position absolute can be really annoying to work with, in my humble opinion. I avoid it when possible, simply because it affects the way other elements (siblings in particular, ie divs that come after your .flex-container div) interact with it. The use cases for position: absolute would be if you're trying to overlay an object on top of another object, or move it to a non-standard position within a parent container. If you look at the jsfiddle link at the bottom, i've included an example of ways to use position:absolute at the top.
body {
background-color: #06283D;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
.heading {
color: #1894E7;
display: flex;
justify-content: center;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 3.6em;
margin: 5%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: #256D85;
justify-content: space-around;
font-family: 'Montserrat', sans-serif;
color: #06283D;
height: 100vh; /* here's the change*/
}
.flex-container>button {
background-color: #DFF6FF;
width: 350px;
margin: 6%;
text-align: center;
line-height: 75px;
font-size: 30px;
border-radius: 10px;
cursor: pointer;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
transition-duration: 0.3s;
}
.flex-container>button:hover {
transform: translateY(-5px);
transition-duration: 0.3s;
box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}
#media screen and (max-width: 1086px) {
.flex-container>button {
margin: 7%;
}
}
<div class="heading">
<h1>Hello World!</h1>
</div>
<div class="flex-container">
<button>Click Me!</button>
<button>Click Me!</button>
<button>Click Me!</button>
<button>Click Me!</button>
</div>
https://jsfiddle.net/slingtruchoice/56e0sj4k/
Related
I am trying to locate an SVG to have a look like this:
And I want to do it by having a ::before or ::after pseudo-elements. But I can't because the SVG is too big and its first location is far from the borders of the parent element.
<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">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>A modern <span>publishing platform</span> </h1>
<p>Grow your audience and build your online brand</p>
<div class="buttons">
<button class="btn ">Start for Free</button>
<button class="btn border ">Learn More</button>
</div>
</header>
</body>
</html>
*{
box-sizing: border-box;
}
html{
font-size: 10px;
}
body{
margin: 0;
padding: 0;
font-family: Poppins;
position: relative;
}
header{
width: 100%;
padding:2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
color: white;
border-bottom-left-radius: 12rem;
position: relative;
z-index: -1;
background-image: linear-gradient(to right,
hsl(13, 100%, 72%),
hsl(353, 100%, 62%));
h1{
margin-top: 10rem;
width: 100%;
font-size: 2.7rem;
span{
display:block;
}
}
p{
font-size: 1.7rem;
font-weight: 100;
}
.buttons{
display: flex;
align-items: center;
justify-content: flex-end;
.btn{
padding: 1rem 2rem;
background-color: white;
border-radius: 3rem;
border: none;
margin: 0px 1rem;
font-style: 400;
font-family: Poppins;
border: .1rem solid white;
}
.border{
background-color: transparent;
color: white;
}
margin-bottom: 10rem;
}
}
header::before{
content: url(images/bg-pattern-intro.svg);
position: absolute;
transform: scale(.1);
}
Can anyone tell me what to do? And why doesn’t the .svg locate itself close to the border of its parent in the first place?
You need to set a width and a height to your pseudo-element. As-is, it's basically an empty in-line element with no actual content to prop it open, so it appears to be invisible. If you inspect in chrome, you'll see at least one of its dimensions is 0.
In this case, I'd also make the pseudo-element display: block so it behaves more like a div.
It appears that when you set the svg image url as the content value then the default behavior is to fill the available container.
Here's a working example:
header::before {
content: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg);
width: 50px;
height: 50px;
position: absolute;
display: block;
}
<header></header>
Another option is to set the svg as a background-image. You'll probably also want to set a background-size value (in this case, contain) so that the background image scales based on its container instead of the svg file's inherent viewBox attribute.
header::before {
content: "";
background: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg) center center / contain no-repeat;
width: 50px;
height: 50px;
position: absolute;
display: block;
}
<header></header>
when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.
https://imgur.com/t9Q0ocm
for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Blue</title>
</head>
<body>
<aside class="side-menu"></aside>
<main class="main-content">
<div class="c-content">
<div class="c-content-text">
</div>
</div>
<div class="r-content">
<div class="r-content-text">
</div>
</div>
<div class="video-container"></div>
</main>
</body>
</html>
CSS
html {
font-family: Roboto, san serif;
font-size: 16px;
font-weight: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 3.125rem;
line-height: 3.6875rem;
text-transform: uppercase;
color: #ffffff;
}
p {
font-size: 1rem;
font-family: Roboto;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
body {
background-color: #1458e4;
font-size: 0;
margin: 0;
padding: 0;
}
.side-menu {
width: 5%;
height: 100vh;
/* background-color: coral; */
position: sticky;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-content {
background-color: cyan;
display: inline-block;
width: 95%;
}
.c-content {
background-color: rgb(184, 11, 184);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
width: 67%;
height: 100vh;
}
.r-content {
display: inline-block;
background-color: darkkhaki;
width: 33%;
height: 100vh;
padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}
.video-container {
background-color: lemonchiffon;
height: 68vh;
}
.c-content-text {
display: inline-block;
/* position: absolute; */
background-color: tomato;
width: 500px;
height: 500px;
}
.r-content-text {
background-color: turquoise;
width: 500px;
height: 500px;
}```
Remove display: inline-block in class c-content-text should also solved your issue.
I think this thread answer's your question Inline-block element height issue
AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.
Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.
I am using a card-based layout from codepen and each card contains an image. On codepen, I am able to resize and adjust the image that appears on the card with no issues. However, when implementing the same exact html code and stylesheet on my browser, the image I am resizing does not respond to any changes made to code contained within "{ img" like it does on codepen. While I was able to adjust the margins of the card wrap to make things appear as I desire, I am wondering what the root of the issue is with my code. Thanks!
<!--DOCTYPE html-->
<html lang="en">
<head>
<html>
<link href="home.css" type="text/css" rel="stylesheet" />
<title>Purple Moss</title>
<!-- inspiration: https://dribbble.com/shots/3784003-Plant-description-page -->
<div class="wrap">
<div class="card">
<div class="card-pic-wrap">
<img src="https://imagizer.imageshack.com/v2/320x240q90/922/MeU4GZ.png" alt="A leafy plant">
</div>
<div class="card-content">
<h3>summary:</h3>
<p>Blossom dorset heath scabious ipsum. Grape hyacinth bee balm bird of paradise obedient plant african lily lily. Spring foxglove florist’s nighmare primrose.</p>
<p>So leafy</p>
</div>
</div>
<div class="card">
<div class="card-pic-wrap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1145795/plant-4.png" alt="Some pointy plants">
</div>
<div class="card-content">
<h3>Some pointy ones</h3>
<p>Florem ipsum sugarbush bloom red rose waxflower coneflower ginger. Saxifrage forget-me-not obedient plant.</p>
<p>I'll take 10</p>
</div>
</div>
</div>
</html>
/* CSS */
$b-r: 5px;
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: #eee;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: "Courier New", Courier, monospace;
}
.wrap {
height: 100%;
}
.card {
display: flex;
flex: 0 0 auto;
background: #fff;
max-width: 700px;
margin: 80px 0;
border-radius: $b-r;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.card-pic-wrap {
border-radius: $b-r 0 0 $b-r;
width: 200px;
flex: 0 0 auto;
position: relative;
background: linear-gradient(to bottom, #f5e4b5, #a19ad9);
img {
position: relative;
bottom: 3em;
left: 50%;
margin-left: -175px;
width: 350px;
-webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(rgba(250, 250, 250, 0.15)));
}
}
.card-content {
padding: 3em 4em 2em;
}
h3 {
font-family: "Courier New", Courier, monospace;
font-weight: bold;
font-size: 2.5em;
margin: 0 0 1em;
}
a {
background: #f5e4b5;
color: #15077d;
padding: 0 25px;
height: 50px;
font-size: 0.8em;
letter-spacing: 1px;
line-height: 50px;
display: inline-block;
border-radius: 25px;
text-decoration: none;
margin-top: 1.5em;
text-transform: uppercase;
border: 1px solid rgba(0,0,0,0.1);
&:hover {
background: #15077d;
color: #f5e4b5;
border: 2px dotted #f5e4b5;
}
}
#media (max-width: 790px) {
body {
overflow-x: hidden;
}
.wrap {
margin-left: 20px;
margin-right: 20px;
}
.card {
flex-direction: column;
margin-top: 50px;
margin-bottom: 50px;
}
.card-pic-wrap {
width: 100%;
border-radius: $b-r $b-r 0 0;
img {
bottom: 20px;
position: relative;
}
}
.card-content {
padding: 2em 2em 1em;
}
}
Never mind, I think I found the issue.
The template code I was using on codepen contained the "img {" within the ".card-pic-wrap {" and did not close off "img {" with closing bracket "}." Rather, it closed off both of these elements with double brackets, which worked fine in codepen but not in browser.
I want to know how to not let a paragraph clip through an image and also how to not let the text in the paragraph go offscreen I am using to make the paragraph I typed in a paragraph(Apar) and it made the text go off screen and I typed in the other one the other paragraph(Cpar) and it clipped into the image please help me fix this. Thank you
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
display: flex;
align-items: center;
border-bottom: 4px solid gray;
}
.nav {
flex: 1 0 auto;
list-style: none;
margin: 0;
padding: 0;
display: flex;
font-family: sans-serif;
}
.nav li {
margin: 0 0 0 2em;
}
main {
flex: 1 0 auto;
padding: 2%;
background-color: white;
}
footer {
flex: 0 0 auto;
padding: 2%;
background-color: white;
}
.BigData {
display: block;
margin-left: auto;
margin-right: auto;
width: 900px;
padding-top: 40px;
}
.Apar {
text-align: right;
position: absolute;
top: 200px;
left: 1450px;
color: white;
font-family: sans-serif;
font-size: 20px;
}
.Cpar {
color: white;
font-family: sans-serif;
font-size: 20px;
text-align: right;
position: absolute;
top: 200px;
}
<head>
<link rel ="stylesheet" href="index.css">
<meta charset = "UTF=8">
<meta name="description" content="denvware software solutions">
<title>Denvware</title>
</head>
<body style="background-color:rgb(255, 255, 255)">
<header>
<img src="Logo1denv.png" width="160" style="background-
color:antiquewhite" class="ImageLogo"/>
<ul class="nav">
<li><h3>Home</h3></li>
<li><h3>About</h3></li>
<li><h3>Contact</h3></li>
</ul>
</header>
<main style="background-color: rgb(53, 60, 68)">
<img src="Bigdata3.jpg" width="720" class="BigData"/>
<p class="Apar">Insert Text Here</p>
<p class="Cpar">Insert Text Here</p>
</main>
<footer>
<h6>Copyright</h6>
</footer>
</body>
</html>
Omar. Welcome to Stack Overflow. I am not sure what are you trying to accomplish here, but the main reason your text is behaving like that is because of the position: absolute you have set in your paragraphs.
Positioned elements leave the normal flow, and become relative to the first positioned parent they have or, as it is in your case, the "body" element. So your Apar
will always be at 200px from the top of the page, regardless of any image it might find.
I've been attempting to get multiple buttons to align vertically and horizontally next to each other in the center of the page. This is what I am aiming for: aligned buttons
However, I have only either gotten the images to center, but then they are not horizontally aligned. Or, I have gotten them to align horizontally, but they are not centered. Here is the code I am using on the buttons.
//used to remove the transition item so that the image changes. This is necessary to show image transition on load.
$(".hoverImage").removeClass("transitionHoverImage")
//sets welcome text opacity to 0 so it can be faded in
$('.welcomeText').css("opacity", 0);
//wait a second before attempting to fade text in. Second parameter of "fadeTo" sets opacity to 1 (100%)
$('.welcomeText').delay(1400).fadeTo(800, 1);
$('.portfolioBtn').css("opacity", 0);
$('.portfolioBtn').delay(1400).fadeTo(800, 1);
$('.resumeBtn').css("opacity", 0);
$('.resumeBtn').delay(1400).fadeTo(800, 1);
body {
font-family: Oswald, Baloo, Calibri, sans-serif;
background: black url(../images/background.jpg) no-repeat center;
height: 3600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.about {
display: block;
text-align: center;
background-color: #ffffff rgba(255, 255, 255, 0.5);
position: relative;
width: 904px;
padding: 33px 27px 34px;
z-index: 1;
}
.logo {
position: fixed;
left: .25em;
top: 3%;
height: 210px;
width: 150px;
z-index: 1;
}
/* you want to set up a transform, translate for this transform: translate (0, -100px); and */
.hoverImage {
position: relative;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.transitionHoverImage {
transform: translate(0px, 200px);
}
.door {
transition: transform 1.5s ease-out;
}
.welcomeText {
position: relative;
top: 120px;
z-index: 1;
font-size: 7em;
color: white;
text-align: center;
}
.centerBtns {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -700px;
text-align: center;
width: 15%;
margin: 0 auto;
font-size: 2em;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
padding: 1.5em 2.8em;
z-index: 2;
}
.resumeBtn {
}
.portfolioBtn {}
/* why is this so finnicky?!?!?!?!?!?!?!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!???????????
/* dropdown menu code starts here */
/*this is the code for the revealed box and the dropshadow of box */
.dropdown-content {
display: none;
position: fixed;
right: 2em;
top:3%;
background-color:#343434;
min-width: 1em;
border-radius: 1em;
box-shadow: .25em 0em .5em #343434;
padding: 0em;
z-index: 1;
}
/* this is the highlight color when you hover over an item */
.dropdown-content a:hover {
background-color: dimgray;
}
/*w3 said I needed this code, so I put it in */
.dropdown:hover .dropdown-content{
display:block;
}
/*revealed dropdown style */
.dropdown-content a {
color: lightgray;
border-radius: 6px;
border-style: solid;
border-color: #343434;
background-color: #343434;
font-weight: bold;
text-align: center;
padding: .5em;
text-decoration: none;
display: block;
}
/*menu button for dropdown*/
.menu-button {
position: fixed;
right: 2em;
top:3%;
font-weight: bold;
font-size: 1em;
color: lightgray;
padding: 1em;
background-color: #343434;
border-color: #343434;
border-style: solid;
border-width: 2px;
border-radius: 6px;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- favicon links-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>DenneyDesign</title>
<!-- CSS Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<ling href="css/animate.css" rel="stylesheet">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Baloo|Oswald" rel="stylesheet">
</head>
<body>
<!--Menu Bar-->
<div class="dropdown">
<button class="menu-button">MENU</button>
<div class="dropdown-content">
HOME
ABOUT
ARTWORK
RESUME
SOCIAL
</div>
</div>
<!--Logo-->
<div>
<img class ="logo" src="images/logo.png">
</div>
<!--Welcome Text-->
<div>
<header>
<h1 class='welcomeText'>WELCOME</h1>
</header>
<!--Hover Image-->
<img class="door hoverImage transitionHoverImage" src="images/door_slider.png">
</div>
<!--Buttons-->
<div>
<button class="centerBtns"><b>PORTFOLIO</b></button><button class="centerBtns resumeBtn"><b>RESUME</b></button>
</div>
<!--About-->
<div>
<header>
<h1><a name="about">ABOUT</a></h1>
</header>
</div>
</body>
<!--javascript-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>
Thanks for your help!
Flexbox does this easily. Use display: flex; justify-content: center; align-items: center; on the parent.
div {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
background: black;
}
<div>
<button>button</button>
<button>button</button>
</div>
Using flexbox is indeed the simplest solution, but just in case I re-arranged your CSS:
.centerBtns {
position: relative;
text-align: center;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
z-index: 2;
width: 40%;
font-size: 1.5em;
padding: 1.5em;
line-height: 3em;
}
<div>
<button class="centerBtns"><b>PORTFOLIO</button><button class="centerBtns resumeBtn">RESUME</b></button>
</div>
If you want both buttons to have the same width make sure the width % is large enough to contain the text. Or if not just remove the width property and tweak around with the last 3 properties to get the results you want.
There are some issues with the code you've provided, and I believe that may be making it difficult to isolate the problem.
A stripped down version of what you posted shows how this can be achieved with a combination of relative positioning and flexbox.
body {
height: 100vh;
background-size: auto auto;
background-color: red;
position: relative;
}
.nav {
border: solid 1px blue;
background: rgba(0,0,255,0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 750px;
display: flex;
align-items: center;
justify-content: center;
}
.nav__button {
font-size: 44px;
margin: 50px;
width: 250px;
padding: 30px 0;
}
<div class="nav">
<button class="nav__button">Portfolio</button>
<button class="nav__button">Resume</button>
</div>
Plunker mirror of the above here: http://plnkr.co/edit/LwJyRFFpSE9dj4KtCuw6
You can use FlexBox. If you have a few buttons, you can set the "justify-content" property as "center", and set a margin to each button. On the other hand, if you have many buttons, you can set the "justify-content" as "space-around", and remove the margin.
https://jsfiddle.net/pablodarde/nhxukt5c/
HTML
<div class='buttons'>
<button>
<b>PORTFOLIO</b>
</button>
<button>
<b>RESUME</b>
</button>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.buttons button {
display: inline-flex;
margin: 5px;
}