Related
I'm making a calculator app and having a bit weird styling problem. Can someone explain me why the digits inside buttons are not centered vertically? If you look closer it looks like they are a little bit above center position. I think its because of font-family placed in "*" selector.
But why is that not centered even if the font is different? Even vertical-align: middle does not help.
buttons
let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");
input1.checked = true;
function setColorTheme() {
if (input1.checked == true) {
main.classList.add("dark");
} else {
main.classList.remove("dark");
}
if (input2.checked == true) {
main.classList.add("light");
} else {
main.classList.remove("light");
}
if (input3.checked == true) {
main.classList.add("saturated");
} else {
main.classList.remove("saturated");
}
}
setColorTheme();
document.querySelectorAll('input[name="theme"]').forEach((e) => {
e.addEventListener("change", setColorTheme);
});
.dark {
--mainBackground: hsl(222, 26%, 31%);
--keypad_toggle_Background: hsl(223, 31%, 20%);
--screenBackground: hsl(224, 36%, 15%);
--removeKeyBackground: hsl(225, 21%, 49%);
--removeKeyShadow: hsl(224, 28%, 35%);
--equal_toggle_KeyBackground: hsl(6, 63%, 50%);
--equalKeyShadow: hsl(6, 70%, 34%);
--normalKeyBackground: hsl(30, 25%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(221, 14%, 31%);
--default: hsl(0, 0%, 100%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.light {
--mainBackground: hsl(0, 0%, 90%);
--keypad_toggle_Background: hsl(0, 5%, 81%);
--screenBackground: hsl(0, 0%, 93%);
--removeKeyBackground: hsl(185, 42%, 37%);
--removeKeyShadow: hsl(185, 58%, 25%);
--equal_toggle_KeyBackground: hsl(25, 98%, 40%);
--equalKeyShadow: hsl(25, 99%, 27%);
--normalKeyBackground: hsl(45, 7%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(60, 10%, 19%);
--default: hsl(0, 0%, 0%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.saturated {
--mainBackground: hsl(268, 75%, 9%);
--keypad_toggle_Background: hsl(268, 71%, 12%);
--screenBackground: hsl(268, 71%, 12%);
--removeKeyBackground: hsl(281, 89%, 26%);
--removeKeyShadow: hsl(285, 91%, 52%);
--equal_toggle_KeyBackground: hsl(176, 100%, 44%);
--equalKeyShadow: hsl(177, 92%, 70%);
--normalKeyBackground: hsl(268, 47%, 21%);
--normalKeyShadow: hsl(290, 70%, 36%);
--normalKeyText: hsl(52, 100%, 62%);
--default: hsl(52, 100%, 62%);
--equalColorText: hsl(198, 20%, 13%);
--delResetColorText: hsl(0, 0%, 100%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Spartan", sans-serif;
}
main {
background: var(--mainBackground);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: var(--default);
}
.calc-container {
min-height: 55vh;
width: 28%;
}
.calc-container header {
display: flex;
min-height: 10vh;
width: 90%;
margin: auto;
align-items: center;
justify-content: space-between;
}
.calc-container header .theme-toggler {
display: flex;
margin-bottom: 0.8rem;
}
.calc-container header .theme-toggler h2 {
font-size: 12px;
align-self: flex-end;
margin-right: 1rem;
}
.calc-container header .theme-toggler .label-container {
display: flex;
justify-content: space-evenly;
text-align: center;
}
.calc-container header .theme-toggler .label-container .label {
margin: 0rem 0.35rem;
}
.calc-container header .theme-toggler .input-container {
width: 60px;
height: 20px;
border-radius: 10px;
background: var(--keypad_toggle_Background);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.calc-container header .theme-toggler .input-container .input {
appearance: none;
background: var(--equal_toggle_KeyBackground);
width: 15px;
height: 15px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
}
.calc-container header .theme-toggler .input-container .input:checked {
opacity: 1;
}
.calc-container .screen {
min-height: 10vh;
width: 90%;
background: var(--screenBackground);
margin: auto;
border-radius: 10px;
display: flex;
align-items: flex-end;
justify-content: center;
flex-direction: column;
word-wrap: break-word;
word-break: break-all;
}
.calc-container .screen-one,
.calc-container .screen-two {
margin: 0.2rem 1.8rem;
width: auto;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.calc-container .screen-one {
font-size: 15px;
opacity: 0.5;
}
.calc-container .screen-two {
font-size: 1.4rem;
}
.calc-container .button-container {
min-height: 40vh;
width: 90%;
background: var(--keypad_toggle_Background);
border-radius: 10px;
margin: 1rem auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 1.5rem;
grid-gap: 1rem;
text-align: center;
}
.calc-container .button-container .button,
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete,
.calc-container .button-container .operation {
border-radius: 10px;
outline: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
background: var(--normalKeyBackground);
box-shadow: 0 5px var(--normalKeyShadow);
}
.calc-container .button-container .reset,
.calc-container .button-container .delete {
background: var(--removeKeyBackground);
color: var(--delResetColorText) !important;
box-shadow: 0 5px var(--removeKeyShadow);
}
.calc-container .button-container .reset:hover,
.calc-container .button-container .delete:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .equal {
background: var(--equal_toggle_KeyBackground);
box-shadow: 0 5px var(--equalKeyShadow);
color: var(--equalColorText) !important;
}
.calc-container .button-container .equal:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
color: var(--default);
}
.calc-container .button-container .button,
.calc-container .button-container .operation {
color: var(--normalKeyText);
}
.calc-container .button-container .button:hover,
.calc-container .button-container .operation:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset {
grid-column: 1/3;
}
.calc-container .button-container .equal {
grid-column: 3/5;
}
p {
position: absolute;
left: 50%;
bottom: 1%;
color: white;
font-size: 12px;
transform: translate(-50%, 0);
}
p span {
text-decoration: underline;
}
#media screen and (max-width: 1100px) {
.calc-container {
transform: translate(-50%, 0);
}
.button-container {
width: 300px !important;
}
.screen {
width: 300px !important;
}
header {
width: 300px !important;
}
p {
text-align: center;
width: 80%;
}
}
#media screen and (max-width: 375px) {
.calc-container {
transform: translate(-90%, -15%) !important;
}
input {
-webkit-appearance: none;
background: var(--equal_toggle_KeyBackground);
}
p {
text-align: center;
width: 60%;
}
header {
width: 300px !important;
}
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./css/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Spartan:wght#700&display=swap"
rel="stylesheet"
/>
<script src="./script.js" defer></script>
<title>Frontend Mentor | Calculator app</title>
</head>
<body>
<main id="main">
<div class="calc-container">
<header>
<h1>calc</h1>
<div class="theme-toggler">
<h2>THEME</h2>
<div>
<div class="label-container">
<label for="input1" class="label">1</label>
<label for="input2" class="label">2</label>
<label for="input3" class="label">3</label>
</div>
<div class="input-container">
<input id="input1" class="input" type="radio" name="theme" />
<input id="input2" class="input" type="radio" name="theme" />
<input id="input3" class="input" type="radio" name="theme" />
</div>
</div>
</div>
</header>
<div class="screen">
<div class="screen-one"></div>
<div class="screen-two"></div>
</div>
<div class="button-container">
<button class="button">7</button>
<button class="button">8</button>
<button class="button">9</button>
<button class="delete">DEL</button>
<button class="button">4</button>
<button class="button">5</button>
<button class="button">6</button>
<button class="operation">+</button>
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="operation">-</button>
<button class="button">.</button>
<button class="button">0</button>
<button class="operation">/</button>
<button class="operation">x</button>
<button class="reset">RESET</button>
<button class="equal">=</button>
</div>
</div>
</main>
<p>
Challenge by <span>Frontend Mentor</span>. Coded by
<span>Adrian397</span>.
</p>
</body>
</html>
The usual issue is line-height. Since no numbers have descenders that's not apparent. I'd probably just add a span to contain the text and translate them down.
let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");
input1.checked = true;
function setColorTheme() {
if (input1.checked == true) {
main.classList.add("dark");
} else {
main.classList.remove("dark");
}
if (input2.checked == true) {
main.classList.add("light");
} else {
main.classList.remove("light");
}
if (input3.checked == true) {
main.classList.add("saturated");
} else {
main.classList.remove("saturated");
}
}
setColorTheme();
document.querySelectorAll('input[name="theme"]').forEach((e) => {
e.addEventListener("change", setColorTheme);
});
button>span {
transform: translateY(3px);
display: inline-block;
}
.dark {
--mainBackground: hsl(222, 26%, 31%);
--keypad_toggle_Background: hsl(223, 31%, 20%);
--screenBackground: hsl(224, 36%, 15%);
--removeKeyBackground: hsl(225, 21%, 49%);
--removeKeyShadow: hsl(224, 28%, 35%);
--equal_toggle_KeyBackground: hsl(6, 63%, 50%);
--equalKeyShadow: hsl(6, 70%, 34%);
--normalKeyBackground: hsl(30, 25%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(221, 14%, 31%);
--default: hsl(0, 0%, 100%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.light {
--mainBackground: hsl(0, 0%, 90%);
--keypad_toggle_Background: hsl(0, 5%, 81%);
--screenBackground: hsl(0, 0%, 93%);
--removeKeyBackground: hsl(185, 42%, 37%);
--removeKeyShadow: hsl(185, 58%, 25%);
--equal_toggle_KeyBackground: hsl(25, 98%, 40%);
--equalKeyShadow: hsl(25, 99%, 27%);
--normalKeyBackground: hsl(45, 7%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(60, 10%, 19%);
--default: hsl(0, 0%, 0%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.saturated {
--mainBackground: hsl(268, 75%, 9%);
--keypad_toggle_Background: hsl(268, 71%, 12%);
--screenBackground: hsl(268, 71%, 12%);
--removeKeyBackground: hsl(281, 89%, 26%);
--removeKeyShadow: hsl(285, 91%, 52%);
--equal_toggle_KeyBackground: hsl(176, 100%, 44%);
--equalKeyShadow: hsl(177, 92%, 70%);
--normalKeyBackground: hsl(268, 47%, 21%);
--normalKeyShadow: hsl(290, 70%, 36%);
--normalKeyText: hsl(52, 100%, 62%);
--default: hsl(52, 100%, 62%);
--equalColorText: hsl(198, 20%, 13%);
--delResetColorText: hsl(0, 0%, 100%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Spartan", sans-serif;
}
main {
background: var(--mainBackground);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: var(--default);
}
.calc-container {
min-height: 55vh;
width: 28%;
}
.calc-container header {
display: flex;
min-height: 10vh;
width: 90%;
margin: auto;
align-items: center;
justify-content: space-between;
}
.calc-container header .theme-toggler {
display: flex;
margin-bottom: 0.8rem;
}
.calc-container header .theme-toggler h2 {
font-size: 12px;
align-self: flex-end;
margin-right: 1rem;
}
.calc-container header .theme-toggler .label-container {
display: flex;
justify-content: space-evenly;
text-align: center;
}
.calc-container header .theme-toggler .label-container .label {
margin: 0rem 0.35rem;
}
.calc-container header .theme-toggler .input-container {
width: 60px;
height: 20px;
border-radius: 10px;
background: var(--keypad_toggle_Background);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.calc-container header .theme-toggler .input-container .input {
appearance: none;
background: var(--equal_toggle_KeyBackground);
width: 15px;
height: 15px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
}
.calc-container header .theme-toggler .input-container .input:checked {
opacity: 1;
}
.calc-container .screen {
min-height: 10vh;
width: 90%;
background: var(--screenBackground);
margin: auto;
border-radius: 10px;
display: flex;
align-items: flex-end;
justify-content: center;
flex-direction: column;
word-wrap: break-word;
word-break: break-all;
}
.calc-container .screen-one,
.calc-container .screen-two {
margin: 0.2rem 1.8rem;
width: auto;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.calc-container .screen-one {
font-size: 15px;
opacity: 0.5;
}
.calc-container .screen-two {
font-size: 1.4rem;
}
.calc-container .button-container {
min-height: 40vh;
width: 90%;
background: var(--keypad_toggle_Background);
border-radius: 10px;
margin: 1rem auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 1.5rem;
grid-gap: 1rem;
text-align: center;
}
.calc-container .button-container .button,
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete,
.calc-container .button-container .operation {
border-radius: 10px;
outline: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
background: var(--normalKeyBackground);
box-shadow: 0 5px var(--normalKeyShadow);
}
.calc-container .button-container .reset,
.calc-container .button-container .delete {
background: var(--removeKeyBackground);
color: var(--delResetColorText) !important;
box-shadow: 0 5px var(--removeKeyShadow);
}
.calc-container .button-container .reset:hover,
.calc-container .button-container .delete:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .equal {
background: var(--equal_toggle_KeyBackground);
box-shadow: 0 5px var(--equalKeyShadow);
color: var(--equalColorText) !important;
}
.calc-container .button-container .equal:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
color: var(--default);
}
.calc-container .button-container .button,
.calc-container .button-container .operation {
color: var(--normalKeyText);
}
.calc-container .button-container .button:hover,
.calc-container .button-container .operation:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset {
grid-column: 1/3;
}
.calc-container .button-container .equal {
grid-column: 3/5;
}
p {
position: absolute;
left: 50%;
bottom: 1%;
color: white;
font-size: 12px;
transform: translate(-50%, 0);
}
p span {
text-decoration: underline;
}
#media screen and (max-width: 1100px) {
.calc-container {
transform: translate(-50%, 0);
}
.button-container {
width: 300px !important;
}
.screen {
width: 300px !important;
}
header {
width: 300px !important;
}
p {
text-align: center;
width: 80%;
}
}
#media screen and (max-width: 375px) {
.calc-container {
transform: translate(-90%, -15%) !important;
}
input {
-webkit-appearance: none;
background: var(--equal_toggle_KeyBackground);
}
p {
text-align: center;
width: 60%;
}
header {
width: 300px !important;
}
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Spartan:wght#700&display=swap" rel="stylesheet" />
<script src="./script.js" defer></script>
<title>Frontend Mentor | Calculator app</title>
</head>
<body>
<main id="main">
<div class="calc-container">
<header>
<h1>calc</h1>
<div class="theme-toggler">
<h2>THEME</h2>
<div>
<div class="label-container">
<label for="input1" class="label">1</label>
<label for="input2" class="label">2</label>
<label for="input3" class="label">3</label>
</div>
<div class="input-container">
<input id="input1" class="input" type="radio" name="theme" />
<input id="input2" class="input" type="radio" name="theme" />
<input id="input3" class="input" type="radio" name="theme" />
</div>
</div>
</div>
</header>
<div class="screen">
<div class="screen-one"></div>
<div class="screen-two"></div>
</div>
<div class="button-container">
<button class="button"><span>7</span></button>
<button class="button"><span>8</span></button>
<button class="button"><span>9</span></button>
<button class="delete"><span>DEL</span></button>
<button class="button"><span>4</span></button>
<button class="button"><span>5</span></button>
<button class="button"><span>6</span></button>
<button class="operation"><span>+</span></button>
<button class="button"><span>1</span></button>
<button class="button"><span>2</span></button>
<button class="button"><span>3</span></button>
<button class="operation"><span>-</span></button>
<button class="button"><span>.</span></button>
<button class="button"><span>0</span></button>
<button class="operation"><span>/</span></button>
<button class="operation"><span>x</span></button>
<button class="reset"><span>RESET</span></button>
<button class="equal"><span>=</span></button>
</div>
</div>
</main>
<p>
Challenge by <span>Frontend Mentor</span>. Coded by
<span>Adrian397</span>.
</p>
</body>
</html>
A simple solution is to use padding-top: Check this out.
let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");
input1.checked = true;
function setColorTheme() {
if (input1.checked == true) {
main.classList.add("dark");
} else {
main.classList.remove("dark");
}
if (input2.checked == true) {
main.classList.add("light");
} else {
main.classList.remove("light");
}
if (input3.checked == true) {
main.classList.add("saturated");
} else {
main.classList.remove("saturated");
}
}
setColorTheme();
document.querySelectorAll('input[name="theme"]').forEach((e) => {
e.addEventListener("change", setColorTheme);
});
.dark {
--mainBackground: hsl(222, 26%, 31%);
--keypad_toggle_Background: hsl(223, 31%, 20%);
--screenBackground: hsl(224, 36%, 15%);
--removeKeyBackground: hsl(225, 21%, 49%);
--removeKeyShadow: hsl(224, 28%, 35%);
--equal_toggle_KeyBackground: hsl(6, 63%, 50%);
--equalKeyShadow: hsl(6, 70%, 34%);
--normalKeyBackground: hsl(30, 25%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(221, 14%, 31%);
--default: hsl(0, 0%, 100%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.light {
--mainBackground: hsl(0, 0%, 90%);
--keypad_toggle_Background: hsl(0, 5%, 81%);
--screenBackground: hsl(0, 0%, 93%);
--removeKeyBackground: hsl(185, 42%, 37%);
--removeKeyShadow: hsl(185, 58%, 25%);
--equal_toggle_KeyBackground: hsl(25, 98%, 40%);
--equalKeyShadow: hsl(25, 99%, 27%);
--normalKeyBackground: hsl(45, 7%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(60, 10%, 19%);
--default: hsl(0, 0%, 0%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.saturated {
--mainBackground: hsl(268, 75%, 9%);
--keypad_toggle_Background: hsl(268, 71%, 12%);
--screenBackground: hsl(268, 71%, 12%);
--removeKeyBackground: hsl(281, 89%, 26%);
--removeKeyShadow: hsl(285, 91%, 52%);
--equal_toggle_KeyBackground: hsl(176, 100%, 44%);
--equalKeyShadow: hsl(177, 92%, 70%);
--normalKeyBackground: hsl(268, 47%, 21%);
--normalKeyShadow: hsl(290, 70%, 36%);
--normalKeyText: hsl(52, 100%, 62%);
--default: hsl(52, 100%, 62%);
--equalColorText: hsl(198, 20%, 13%);
--delResetColorText: hsl(0, 0%, 100%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Spartan", sans-serif;
}
main {
background: var(--mainBackground);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: var(--default);
}
.calc-container {
min-height: 55vh;
width: 28%;
}
.calc-container header {
display: flex;
min-height: 10vh;
width: 90%;
margin: auto;
align-items: center;
justify-content: space-between;
}
.calc-container header .theme-toggler {
display: flex;
margin-bottom: 0.8rem;
}
.calc-container header .theme-toggler h2 {
font-size: 12px;
align-self: flex-end;
margin-right: 1rem;
}
.calc-container header .theme-toggler .label-container {
display: flex;
justify-content: space-evenly;
text-align: center;
}
.calc-container header .theme-toggler .label-container .label {
margin: 0rem 0.35rem;
}
.calc-container header .theme-toggler .input-container {
width: 60px;
height: 20px;
border-radius: 10px;
background: var(--keypad_toggle_Background);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.calc-container header .theme-toggler .input-container .input {
appearance: none;
background: var(--equal_toggle_KeyBackground);
width: 15px;
height: 15px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
}
.calc-container header .theme-toggler .input-container .input:checked {
opacity: 1;
}
.calc-container .screen {
min-height: 10vh;
width: 90%;
background: var(--screenBackground);
margin: auto;
border-radius: 10px;
display: flex;
align-items: flex-end;
justify-content: center;
flex-direction: column;
word-wrap: break-word;
word-break: break-all;
}
.calc-container .screen-one,
.calc-container .screen-two {
margin: 0.2rem 1.8rem;
width: auto;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.calc-container .screen-one {
font-size: 15px;
opacity: 0.5;
}
.calc-container .screen-two {
font-size: 1.4rem;
}
.calc-container .button-container {
min-height: 40vh;
width: 90%;
background: var(--keypad_toggle_Background);
border-radius: 10px;
margin: 1rem auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 1.5rem;
grid-gap: 1rem;
text-align: center;
}
.calc-container .button-container .button,
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete,
.calc-container .button-container .operation {
border-radius: 10px;
outline: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
background: var(--normalKeyBackground);
box-shadow: 0 5px var(--normalKeyShadow);
/* ADD THIS */
padding-top: 5px;
}
.calc-container .button-container .reset,
.calc-container .button-container .delete {
background: var(--removeKeyBackground);
color: var(--delResetColorText) !important;
box-shadow: 0 5px var(--removeKeyShadow);
}
.calc-container .button-container .reset:hover,
.calc-container .button-container .delete:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .equal {
background: var(--equal_toggle_KeyBackground);
box-shadow: 0 5px var(--equalKeyShadow);
color: var(--equalColorText) !important;
}
.calc-container .button-container .equal:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
color: var(--default);
}
.calc-container .button-container .button,
.calc-container .button-container .operation {
color: var(--normalKeyText);
}
.calc-container .button-container .button:hover,
.calc-container .button-container .operation:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset {
grid-column: 1/3;
}
.calc-container .button-container .equal {
grid-column: 3/5;
}
p {
position: absolute;
left: 50%;
bottom: 1%;
color: white;
font-size: 12px;
transform: translate(-50%, 0);
}
p span {
text-decoration: underline;
}
#media screen and (max-width: 1100px) {
.calc-container {
transform: translate(-50%, 0);
}
.button-container {
width: 300px !important;
}
.screen {
width: 300px !important;
}
header {
width: 300px !important;
}
p {
text-align: center;
width: 80%;
}
}
#media screen and (max-width: 375px) {
.calc-container {
transform: translate(-90%, -15%) !important;
}
input {
-webkit-appearance: none;
background: var(--equal_toggle_KeyBackground);
}
p {
text-align: center;
width: 60%;
}
header {
width: 300px !important;
}
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./css/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Spartan:wght#700&display=swap"
rel="stylesheet"
/>
<script src="./script.js" defer></script>
<title>Frontend Mentor | Calculator app</title>
</head>
<body>
<main id="main">
<div class="calc-container">
<header>
<h1>calc</h1>
<div class="theme-toggler">
<h2>THEME</h2>
<div>
<div class="label-container">
<label for="input1" class="label">1</label>
<label for="input2" class="label">2</label>
<label for="input3" class="label">3</label>
</div>
<div class="input-container">
<input id="input1" class="input" type="radio" name="theme" />
<input id="input2" class="input" type="radio" name="theme" />
<input id="input3" class="input" type="radio" name="theme" />
</div>
</div>
</div>
</header>
<div class="screen">
<div class="screen-one"></div>
<div class="screen-two"></div>
</div>
<div class="button-container">
<button class="button">7</button>
<button class="button">8</button>
<button class="button">9</button>
<button class="delete">DEL</button>
<button class="button">4</button>
<button class="button">5</button>
<button class="button">6</button>
<button class="operation">+</button>
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="operation">-</button>
<button class="button">.</button>
<button class="button">0</button>
<button class="operation">/</button>
<button class="operation">x</button>
<button class="reset">RESET</button>
<button class="equal">=</button>
</div>
</div>
</main>
<p>
Challenge by <span>Frontend Mentor</span>. Coded by
<span>Adrian397</span>.
</p>
</body>
</html>
How can I remove this strange black outlines below my buttons. Take a look at my code and its output.
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background: hsl(0, 0%, 95%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
margin: 40px 0;
font-size: 15px;
}
div {
background: white;
width: 85%;
height: 30%;
}
.sedans {
background: hsl(31, 77%, 52%);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-sizing: border-box;
padding: 2.9em;
max-width: 450px;
}
h2 {
font-family: "Big Shoulders Display";
color: hsl(0, 0%, 95%);
font-size: 2em;
}
p {
font-family: "Lexend Deca";
color: hsla(0, 0%, 100%, 0.75);
line-height: 1.5em;
padding-bottom: 2em;
}
button {
color: hsl(31, 77%, 52%);
padding: 1em 2.2em;
background: hsl(0, 0%, 95%);
border-radius: 2em;
font-family: "Lexend Deca";
}
div.suvs {
background: hsl(184, 100%, 22%);
box-sizing: border-box;
padding: 2.9em;
max-width: 450px;
}
.suvs button {
color: hsl(184, 100%, 22%);
}
div.luxury {
background: hsl(179, 100%, 13%);
box-sizing: border-box;
padding: 2.9em;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-width: 450px;
}
.luxury button {
color: hsl(179, 100%, 13%);
}
.sedans button:hover {
background: hsl(31, 77%, 52%);
color: hsl(0, 0%, 95%);
}
.suvs button:hover {
background: hsl(184, 100%, 22%);
color: hsl(0, 0%, 95%);
}
.luxury button:hover {
background: hsl(179, 100%, 13%);
color: hsl(0, 0%, 95%);
}
#media only screen and (min-width: 1440px) {
body {
flex-direction: row;
margin: auto 100px;
.sedans {
border-top-right-radius: 0;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
max-width: 310px;
height: 500px;
}
.suvs {
max-width: 310px;
height: 500px;
}
.luxury {
border-top-right-radius: 10px;
border-bottom-left-radius: 0;
max-width: 310px;
height: 500px;
}
p {
line-height: 1.7em;
}
h2 {
font-size: 2.5em;
}
button {
margin-top: 2em;
}
}
}
<!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>Gerson-web001</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sedans">
<img src="images/icon-sedans.svg" alt="">
<h2>SEDANS</h2>
<p>Choose a sedan for its affordabiity and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
<button>Learn More</button>
</div>
<div class="suvs">
<img src="images/icon-suvs.svg" alt="">
<h2>SUVS</h2>
<p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures</p>
<button>Learn More</button>
</div>
<div class="luxury">
<img src="images/icon-luxury.svg" alt="">
<h2>LUXURY</h2>
<p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
<button>Learn More</button>
</div>
</body>
</html>
To remove your button outlines, you can simply set the border: 0 and outline: 0
button {
color: hsl(31, 77%, 52%);
padding: 1em 2.2em;
background: hsl(0, 0%, 100%);
border-radius: 2em;
font-family: "Lexend Deca";
/* Add this to your button tag */
outline: none; /* Optional */
border: 0;
}
I'm having an issue with my footer. I set up the footer to be a flexbox and I want the "social media" header and icons to wrap onto the second row of the footer but for some reason whenever I set the "container" class to flex-wrap: wrapeverything in the footer becomes aligned vertically down the screen.
.container {
position: relative;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: baseline;
background: black;
text-decoration: none;
color: white;
}
.items {
background: transparent;
order: 5;
flex: 1 auto;
color: white;
padding: 40px 0;
width: 100%;
height: auto;
text-align: center;
font-family: Arial, sans-serif;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.items a {
text-decoration: none;
color: #a2a4a7;
}
.items a:hover {
cursor: pointer;
color: white;
}
#footer-headings {
font-family: 'Cabin Condensed', sans-serif;
font-size: 20px;
padding: 10px;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
#media only screen and (max-width: 650px) {
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
}
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 100%;
bottom: -5px;
background: white;
height: 2.5px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
#media only screen and (max-width: 650px) {
.items {
font-size: 10px;
}
#footer-headings {
font-size: 10px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="items">
<p id="footer-headings">Useful Links</p><br>
<p>Find a Store</p><br>
<p>Sign Up For Email</p><br>
<p>Become A Member</p><br>
<p>Site Feedback</p>
</div>
<!-- <div class="vertical-right-1" style="left: 25%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<strong>
<p id="footer-headings">About The
League</p><br>
</strong>
<p>About Us</p><br>
<p>Careers</p><br>
<p>News</p><br>
<p>Sustainability</p>
</div>
<!-- <div class="vertical-right-1" style="left: 50%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">
<strong>Policies</strong></p><br>
<p>Terms of service</p><br>
<p>Refund</p><br>
<p>Privacy</p><br>
<p>Shipping</p>
</div>
<!-- <div class="vertical-right-1" style="left: 75%; height: 90%; margin: 10px auto; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">Need To Talk?</p><br>
<p>Order Status</p><br>
<p>Returns</p><br>
<p>Payment Options</p><br>
<p>Contact Us</p><br>
</div>
<div class="items wrap">
<h3 id="footer-headings">Follow Us!</h3><br>
</div>
</div>
Any help with getting the "Follow Us" and the social icons belew it to wrap onto the next row and remain horizontal and ideally centered would be greatly appreciated.
you should use flex-wrap:wrap inside the container, but also remove width:100% from items.
.container {
position: relative;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: baseline;
background: black;
text-decoration: none;
color: white;
}
.full {
/* flex-grow: -1; */
}
.items {
background: transparent;
order: 5;
flex: 1 auto;
color: white;
padding: 40px 0;
/* width: 100%; */
height: auto;
text-align: center;
font-family: Arial, sans-serif;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.items a {
text-decoration: none;
color: #a2a4a7;
}
.items a:hover {
cursor: pointer;
color: white;
}
#footer-headings {
font-family: 'Cabin Condensed', sans-serif;
font-size: 20px;
padding: 10px;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
#media only screen and (max-width: 650px) {
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
}
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 100%;
bottom: -5px;
background: white;
height: 2.5px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
#media only screen and (max-width: 650px) {
.items {
font-size: 10px;
}
#footer-headings {
font-size: 10px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="items">
<p id="footer-headings">Useful Links</p><br>
<p>Find a Store</p><br>
<p>Sign Up For Email</p><br>
<p>Become A Member</p><br>
<p>Site Feedback</p>
</div>
<!-- <div class="vertical-right-1" style="left: 25%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<strong>
<p id="footer-headings">About The
League</p><br>
</strong>
<p>About Us</p><br>
<p>Careers</p><br>
<p>News</p><br>
<p>Sustainability</p>
</div>
<!-- <div class="vertical-right-1" style="left: 50%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">
<strong>Policies</strong></p><br>
<p>Terms of service</p><br>
<p>Refund</p><br>
<p>Privacy</p><br>
<p>Shipping</p>
</div>
<!-- <div class="vertical-right-1" style="left: 75%; height: 90%; margin: 10px auto; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">Need To Talk?</p><br>
<p>Order Status</p><br>
<p>Returns</p><br>
<p>Payment Options</p><br>
<p>Contact Us</p><br>
</div>
<div class="items wrap full">
<h3 id="footer-headings">Follow Us!</h3><br>
</div>
</div>
I've tried using AutoPrefixer in case it was anything related to webkits with Flexbox, but it didn't make any difference.
Here's my CSS:
#title {
text-align: center;
font: 50px/1.3 "Oleo Script", Helvetica, sans-serif;
color: #2b2b2b;
text-shadow: 2.3px 2px 0px rgb(255, 255, 255, 0.8);
color: rgba(250, 57, 57, 0.932);
}
.container-1 {
margin: auto;
display: flex;
border-style: solid;
border-radius: 8%;
background-color: rgba(250, 57, 57, 0.932);
width: 475px;
height: 500px;
align-items: flex-end;
flex-wrap: wrap;
}
.container-1 div {
padding: 11px;
}
.session {
flex: 2;
order: 2; /*Remember when using order, all elements START at order: 0; */
font: 1rem "Oleo Script", Helvetica, sans-serif;
}
#sessionTimer {
font-size: 1.10em;
font-weight: bolder;
}
.minusSession {
flex: 1;
order: 1;
}
#minusSessionButton {
width: 2rem;
height: 2rem;
font-size: 1rem;
outline: none;
color: white;
background-color: rgb(216, 211, 211);
margin-left: 1rem;
}
.plusSession {
flex: 1;
order: 3;
margin-left: -1rem;
}
#plusSessionButton {
width: 2rem;
height: 2rem;
font-size: 1rem;
outline: none;
color: white;
background-color: rgb(216, 211, 211);
margin-left: 1rem;
}
.break {
flex: 2;
order: 5;
font: 1rem "Oleo Script", Helvetica, sans-serif;
}
#breakTimer {
font-size: 1.10em;
font-weight: bolder;
}
.minusBreak {
flex: 1;
order: 4;
margin-left: 3rem;
}
#minusBreakButton {
width: 2rem;
height: 2rem;
font-size: 1rem;
outline: none;
color: white;
background-color: rgb(216, 211, 211);
}
.plusBreak {
flex: 1;
order: 6;
}
#plusBreakButton {
width: 2rem;
height: 2rem;
font-size: 1rem;
outline: none;
color: white;
background-color: rgb(216, 211, 211);
margin-left: 0.1rem;
margin-right: 1rem;
}
.pause {
flex: 1;
order: 8;
}
#pauseButton {
width: 80px;
height: 60px;
background-color: rgb(134, 231, 89);
color: white;
outline: none;
font: 400 20px "Oleo Script", Helvetica, sans-serif;
margin-left: 22px;
}
.timer {
flex: 2;
order: 9; /* 8 */
text-align: center;
font: 400 30px "Oleo Script", Helvetica, sans-serif;
}
h1 {
margin-top: 5px;
margin-bottom: 5px;
}
.stop {
flex: 1;
order: 10; /* 9 */
}
#stopButton {
width: 80px;
height: 60px;
font: 400 18px "Oleo Script", Helvetica, sans-serif;
background-color: rgb(134, 231, 89);
color: white;
outline: none;
}
.start {
flex: 4;
order: 11; /*10 */
text-align: center;
}
#startButton {
text-align: center;
background-color: rgb(134, 231, 89);
color: white;
width: 250px;
height: 55px;
font: 32px "Oleo Script", Helvetica, sans-serif;
font-style: italic;
outline: none;
}
.sessionTitle {
flex: 1;
order: 7;
flex-basis: 100%;
text-align: center;
font: 400 30px "Oleo Script", Helvetica, sans-serif;
}
.breakTitle {
flex: 1;
order: 7;
flex-basis: 100%;
text-align: center;
font: 400 30px "Oleo Script", Helvetica, sans-serif;
}
button {
transition: filter 100ms ease-in-out;
}
button:hover {
cursor: pointer;
filter: brightness(0.9);
}
body {
background: rgb(180, 227, 145); /* Old browsers */
background: -moz-linear-gradient(
top,
rgba(180, 227, 145, 1) 0%,
rgba(97, 196, 25, 1) 50%,
rgba(180, 227, 145, 1) 100%
); /* FF3.6-15 */
background: -webkit-linear-gradient(
top,
rgba(180, 227, 145, 1) 0%,
rgba(97, 196, 25, 1) 50%,
rgba(180, 227, 145, 1) 100%
); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(
to bottom,
rgba(180, 227, 145, 1) 0%,
rgba(97, 196, 25, 1) 50%,
rgba(180, 227, 145, 1) 100%
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */
color: white;
}
Here's the project of what it should look like on Chrome/Firefox:
https://kfollen93.github.io/Pomodoro-Timer/
However, if you open it in Safari, you will notice the Break " + " symbol has been bumped down a row, which results in the following rows being pushed down one as well.
I increased the width and height by 20px and it works now.
I'm creating a navigation bar with multiple buttons. The buttons have a text-shadow to stand out on a background image I have on my page, as the navigation bar is transparent. As I hover over the nav, the nav takes on a background color, and I'd like all of the buttons to remove its text-shadow as it's not eye appealing. As I hover on a button, that button is the only one without the text-shadow, while the other buttons still have it. Any solutions? I'm pretty sure this should be simple.
nav button {
font-family: 'Didact Gothic', sans-serif;
font-size: 170%;
color: hsla(48, 70%, 63%, 1);
text-shadow: 0px 0px 5px black;
cursor: pointer;
background: none;
border: none;
margin: 0% 2% 0% 2%;
/* To give space between the buttons */
padding: .3% 2% .6% 2%;
/* To give space inside the buttons */
transition: 0.3s;
}
nav button:hover {
background-color: hsla(9, 57%, 50%, 1);
color: hsla(48, 70%, 83%, 1);
text-shadow: none;
}
<nav>
<hr>
<button>Home</button>
<button>Menu</button>
<button>Photogallery</button>
</nav>
Firstly, remove the buttons inside the a tag since you can't have buttons inside them. Then what you want to do is something like this:
nav a {
font-family: 'Didact Gothic', sans-serif;
font-size: 170%;
color: hsla(48, 70%, 63%, 1);
text-shadow: 0px 0px 5px black;
cursor: pointer;
background: none;
border: none;
margin: 0% 2% 0% 2%;
/* To give space between the buttons */
padding: .3% 2% .6% 2%;
/* To give space inside the buttons */
transition: 0.3s;
}
nav:hover{
background-color: hsla(9, 57%, 50%, 1);
}
nav:hover a{
text-shadow:none;
background-color: hsla(9, 57%, 50%, 1);
color: hsla(48, 70%, 83%, 1);
}
<nav>
<hr>
Home
Menu
Photogallery
</nav>
I believe you're looking for this set:
nav button {
font-family: 'Didact Gothic', sans-serif;
font-size: 170%;
color: hsla(48, 70%, 63%, 1);
text-shadow: 0px 0px 5px black;
cursor: pointer;
background: none;
border: none;
margin: 0% 2% 0% 2%;
/* To give space between the buttons */
padding: .3% 2% .6% 2%;
/* To give space inside the buttons */
transition: 0.3s;
}
nav:hover {
background-color: hsla(9, 57%, 50%, 1);
}
nav:hover button {
background-color: hsla(9, 57%, 50%, 1);
color: hsla(48, 70%, 83%, 1);
text-shadow: none;
}
<nav>
<hr>
<button>Home</button>
<button>Menu</button>
<button>Photogallery</button>
</nav>
Here is what I have tried.
I have eliminated button tag inside a tag to follow best practice.
nav a {
font-family: 'Didact Gothic', sans-serif;
font-size: 170%;
color: hsla(48, 70%, 63%, 1);
text-shadow: 0px 0px 5px black;
text-decoration: none;
cursor: pointer;
background: none;
border: none;
margin: 0% 2% 0% 2%;
/* To give space between the buttons */
padding: .3% 2% .6% 2%;
/* To give space inside the buttons */
transition: 0.3s;
}
nav a:hover {
background-color: hsla(9, 57%, 50%, 1);
color: hsla(48, 70%, 83%, 1);
text-shadow: none;
}
nav:hover a {
text-shadow: none;
}
<nav>
Home
Menu
Photogallery
</nav>