Issue
My .buttons section is not centered. I want it to be centered. Also when I try to make my window bigger or smaller it stays that way, it never centers, I already added align-items and justify-content to center but makes almost no change. thanks!
Snippet:
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/****************************/
h1 {
text-align: center;
}
html {
box-sizing: border-box;
/*! ????*/
font-family: 'Heebo', sans-serif;
}
h1 {
font-size: 2em;
padding: 10px;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.container {
display: flex;
flex-direction: column;
max-width: 500px;
height: 450px;
width: 60%;
background-color: rgb(107, 111, 168);
border-radius: 10px;
border: 5px solid rgb(89, 93, 140);
border-bottom: 20px solid rgb(89, 93, 140);
align-items: center;
justify-content: center;
margin: 10px auto;
padding: 25px 5px 10px 5px;
/* Arriba | Derecha | Abajo | Izquierda */
/* flex: 1 2 250px; */
/* flex grow | flex shrink | flex bais*/
/*! ????*/
}
#display {
background-color: rgb(112, 234, 211);
border-radius: 15px;
padding: 25px;
font-size: 40px;
width: 75%;
margin: 5% auto;
border-bottom: 10px solid rgb(86, 176, 159);
text-align: right;
}
.buttons {
/* flex-flow: column wrap; */
flex-direction: column;
justify-content: center;
align-items: center;
/* Arriba | Derecha | Abajo | Izquierda */
justify-content: center;
align-items: center;
flex-shrink: 0;
/* flex grow | flex shrink | flex bais*/
font-family: 'Heebos', sans-serif;
width: 50%;
}
.button {
font-size: 30px;
/* text-align: center; */
border-radius: 15px;
color: black;
margin: 5px;
background-color: white;
width: 20%;
font-family: 'Heebos', sans-serif;
border: white;
border-bottom: 6px solid rgb(211, 211, 211);
}
/* flex:2 1 400px; */
/* takes twice amount of extra space */
#cl {
background-color: rgb(255, 42, 0);
border-bottom: 6px solid rgb(205, 34, 0);
}
#equals {
background-color: rgb(255, 136, 0);
border-bottom: 6px solid rgb(217, 116, 0);
width: 40%;
/* flex-shrink: 1; */
}
/* @media (max-width: 600px) {
.buttons {
width: 100%;
font-size: 20px;
}
#display {
font-size: 30px;
}
}<body>
<h1>Calculator</h1>
<div class="container">
<div id="display">0</div>
<section class="buttons">
<button class="button" id="cl">C</button>
<button class="button" id="percent">%</button>
<button class="button" type="button" id="sign">+/-</button>
<button class="button" id="div">/</button>
<button id="sevem" class="button">7</button>
<button id="eight" class="button">8</button>
<button id="nine" class="button">9</button>
<button class="button" id="mult">x</button>
<button id="four" class="button">4</button>
<button id="five" class="button">5</button>
<button id="six" class="button">6</button>
<button class="button" id="sub">-</button>
<button id="one" class="button">1</button>
<button id="two" class="button">2</button>
<button id="three" class="button">3</button>
<button class="button" id="add">+</button>
<button id="zero" class="button">0</button>
<button id="dot" class="button">.</button>
<button class="button" id="equals">=</button>
</section>
</div>
</body>
Here is my code: html:
**<!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">
<title>Calculator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@615&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Calculator</h1>
<div class="container">
<div id="display">0</div>
<section class="buttons" >
<button class="button" id="cl">C</button>
<button class="button" id="percent">%</button>
<button class="button" type="button" id="sign">+/-</button>
<button class="button" id="div">/</button>
<button id="sevem" class="button">7</button>
<button id="eight" class="button">8</button>
<button id="nine" class="button">9</button>
<button class="button" id="mult">x</button>
<button id="four" class="button">4</button>
<button id="five" class="button">5</button>
<button id="six" class="button">6</button>
<button class="button" id="sub">-</button>
<button id="one" class="button">1</button>
<button id="two" class="button">2</button>
<button id="three" class="button">3</button>
<button class="button" id="add">+</button>
<button id="zero" class="button">0</button>
<button id="dot" class="button">.</button>
<button class="button" id="equals">=</button>
</section>
</div>
<script src="index.js"></script>
</body>
</html>**
css:
**/* path: live-server --no-css-inject */
html, body, div, span, applet, object, iframe, h1, h2,
h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/****************************/
h1 {
text-align: center;
}
html {
box-sizing: border-box;
/*! ????*/
font-family: 'Heebo', sans-serif;
}
h1 {
font-size: 2em;
padding: 10px;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.container {
display: flex;
flex-direction: column;
max-width: 500px;
height: 450px;
width: 60%;
background-color: rgb(107, 111, 168);
border-radius: 10px;
border: 5px solid rgb(89, 93, 140);
border-bottom: 20px solid rgb(89, 93, 140);
align-items: center;
justify-content: center;
margin: 10px auto;
padding: 25px 5px 10px 5px;
/* Arriba | Derecha | Abajo | Izquierda */
/* flex: 1 2 250px; */
/* flex grow | flex shrink | flex bais*/
/*! ????*/
}
#display {
background-color: rgb(112, 234, 211);
border-radius: 15px;
padding: 25px;
font-size: 40px;
width: 75%;
margin: 5% auto;
border-bottom: 10px solid rgb(86, 176, 159);
text-align: right;
}
.buttons {
/* flex-flow: column wrap; */
flex-direction: column;
justify-content: center;
align-items: center;
/* Arriba | Derecha | Abajo | Izquierda */
justify-content: center;
align-items: center;
flex-shrink: 0;
/* flex grow | flex shrink | flex bais*/
font-family: 'Heebos', sans-serif;
width: 50%;
}
.button {
font-size: 30px;
/* text-align: center; */
border-radius: 15px;
color: black;
margin: 5px;
background-color: white;
width: 20%;
font-family: 'Heebos', sans-serif;
border: white;
border-bottom: 6px solid rgb(211, 211, 211);
}
/* flex:2 1 400px; */
/* takes twice amount of extra space */
#cl {
background-color: rgb(255, 42, 0);
border-bottom: 6px solid rgb(205, 34, 0);
}
#equals {
background-color: rgb(255, 136, 0);
border-bottom: 6px solid rgb(217, 116, 0);
width: 40%;
/* flex-shrink: 1; */
}
/* @media (max-width: 600px) {
.buttons {
width: 100%;
font-size: 20px;
}
#display {
font-size: 30px;
}
} */**
Solution
Just edited .buttons section
display: flexflex-direction: rowflex-wrap: wrap
Didn't try to remove unnecessary styles
html, body, div, span, applet, object, iframe, h1, h2,
h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/****************************/
h1 {
text-align: center;
}
html {
box-sizing: border-box;
/*! ????*/
font-family: 'Heebo', sans-serif;
}
h1 {
font-size: 2em;
padding: 10px;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.container {
display: flex;
flex-direction: column;
max-width: 500px;
height: 450px;
width: 60%;
background-color: rgb(107, 111, 168);
border-radius: 10px;
border: 5px solid rgb(89, 93, 140);
border-bottom: 20px solid rgb(89, 93, 140);
align-items: center;
justify-content: center;
margin: 10px auto;
padding: 25px 5px 10px 5px;
/* Arriba | Derecha | Abajo | Izquierda */
/* flex: 1 2 250px; */
/* flex grow | flex shrink | flex bais*/
/*! ????*/
}
#display {
background-color: rgb(112, 234, 211);
border-radius: 15px;
padding: 25px;
font-size: 40px;
width: 75%;
margin: 5% auto;
border-bottom: 10px solid rgb(86, 176, 159);
text-align: right;
}
.buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* flex-flow: column wrap; */
justify-content: center;
align-items: center;
/* Arriba | Derecha | Abajo | Izquierda */
justify-content: center;
align-items: center;
flex-shrink: 0;
/* flex grow | flex shrink | flex bais*/
font-family: 'Heebos', sans-serif;
width: auto;
}
.button {
font-size: 30px;
/* text-align: center; */
border-radius: 15px;
color: black;
margin: 5px;
background-color: white;
width: 20%;
font-family: 'Heebos', sans-serif;
border: white;
border-bottom: 6px solid rgb(211, 211, 211);
}
/* flex:2 1 400px; */
/* takes twice amount of extra space */
#cl {
background-color: rgb(255, 42, 0);
border-bottom: 6px solid rgb(205, 34, 0);
}
#equals {
background-color: rgb(255, 136, 0);
border-bottom: 6px solid rgb(217, 116, 0);
width: 40%;
/* flex-shrink: 1; */
}<body>
<h1>Calculator</h1>
<div class="container">
<div id="display">0</div>
<section class="buttons" >
<button class="button" id="cl">C</button>
<button class="button" id="percent">%</button>
<button class="button" type="button" id="sign">+/-</button>
<button class="button" id="div">/</button>
<button id="sevem" class="button">7</button>
<button id="eight" class="button">8</button>
<button id="nine" class="button">9</button>
<button class="button" id="mult">x</button>
<button id="four" class="button">4</button>
<button id="five" class="button">5</button>
<button id="six" class="button">6</button>
<button class="button" id="sub">-</button>
<button id="one" class="button">1</button>
<button id="two" class="button">2</button>
<button id="three" class="button">3</button>
<button class="button" id="add">+</button>
<button id="zero" class="button">0</button>
<button id="dot" class="button">.</button>
<button class="button" id="equals">=</button>
</section>
</div>
<script src="index.js"></script>
</body>Answered By - kerm
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.