I want to make three square buttons that are centered in the middle of my website. Its in a split so then when the screen in small, the buttons are in rows and when the screen in big, the buttons are in columns.
.split {
display: flex;
flex-direction: column;
column-gap: 50px;
}
#media (min-width: 40em) {
.split {
flex-direction: row;
}
.text-center {
text-align: center;
}
button {
display: flex;
justify-content: space-evenly;
background: #ADCEAC;
width: 80%;
line-height: 250px;
font-family: "Tenor Sans", sans-serif;
border: none;
border-radius: 15px;
}
<div class="text-center">
<div class="split">
<div>
<button onclick="window.location.href = 'FirstPage.html';">HOME</button>
</div>
<div>
<button onclick="window.location.href = 'FirstPage.html';">HOME</button>
</div>
<div>
<button onclick="window.location.href = 'FirstPage.html';">HOME</button>
</div>
</div>
</div>
When it is in rows, it is fine. However when it is columns, the buttons are 3 long lines at the very left end.
You just need to define the button’s width property:
.split {
display: flex;
flex-direction: column;
column-gap: 50px;
}
#media (min-width: 40em) {
.split {
flex-direction: row;
}
button {
margin-bottom: 0;
}
.text-center {
text-align: center;
}
}
button {
display: flex;
justify-content: space-evenly;
background: #ADCEAC;
width: 70px;
font-family: "Tenor Sans", sans-serif;
border: none;
border-radius: 15px;
margin-bottom: 10px;
}
<div class="text-center">
<div class="split">
<div>
<button onclick="window.location.href = 'FirstPage.html';">HOME</button>
</div>
<div>
<button onclick="window.location.href = 'FirstPage.html';">HOME</button>
</div>
<div>
<button onclick="window.location.href = 'FirstPage.html';">HOME</button>
</div>
</div>
</div>
.split {
display: flex
flex-direction: column
column-gap: 50px
justify-content: center
Related
I have a JS fiddle here and it's pretty simple what I want to happen but difficult for me to execute it. In the fiddle, you notice there is a red box. I want that red box to be displayed under the text "Join Balance...". I am not sure how to do this.
Can somebody help me?
Fiddle: https://jsfiddle.net/f2h390wc/
HTML and CSS:
/* newsletter section */
#custom_html-5 {
width: 100%;
background-color: #f2f2f2;
padding-bottom: 40px;
padding-top: 20px;
margin-bottom: 70px;
padding-left: 70px !important;
padding-right: 20px !important;
}
.newsletter_inner_section {
display: flex;
}
.newsletter_gif {
width: 200px;
height: auto;
}
.newsletter_left,
.newsletter_center,
.newsletter_right {
display: inline-flex;
}
.newsletter_left {
width: auto;
}
.newsletter_center {
width: 100%;
align-items: center;
}
.newsletter_right {
background: red;
width: 40%;
justify-content: flex-end;
}
.newsletter_text_section {
color: black !important;
font-size: 24px !important;
font-weight: bold;
}
.eVEmvD.eVEmvD.eVEmvD.eVEmvD.eVEmvD.eVEmvD {
width: fit-content !important;
padding: 0 20px;
}
.fGCWnQ.fGCWnQ {
justify-content: flex-end;
}
.kvTDNe.kvTDNe {
display: unset;
}
/* Media Newsletter section only */
#media (max-width:1144px) {
#custom_html-5 {
padding-left: 20px !important;
padding-right: 20px !important;
}
.newsletter_inner_section {
width: 100% !important;
justify-content: center;
display: flex;
}
.newsletter_center,
.newsltter_right {
flex-direction: column !important;
}
}
<!-- newsletter section -->
<div class="newsletter_section">
<div class="newsletter_inner_section">
<div class="newsletter_left">
<img src="https://balancecoffee.co.uk/wp-content/themes/balancecoffeechild/img/newsletternnobkg2.gif" alt="Balance Newsletter" style="padding-right:30px;" class="newsletter_gif">
</div>
<div class="newsletter_center">
<p class="newsletter_text_section">Join Balance and get 20% off your first order</p>
</div>
<div class="newsletter_right">
<div class="newsletter_input_section">
<div class="klaviyo-form-Rrsqsh"></div>
</div>
</div>
</div>
</div>
If you want the text and the red box on the right to form a column, then they both need to be in a flexbox with flex-direction: column;.
I created a sample from scratch because there is a lot of superfluous stuff in your JSFiddle.
.group {
display: flex;
flex-direction: row;
width: 100%;
}
.content-box {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 40px;
}
.left {
background-color: blue;
}
.right {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.top-right {
background-color: green;
}
.bottom-right {
background-color: red;
}
<div class='group'>
<div class='left content-box'>
Content
</div>
<div class='right'>
<div class='top-right content-box'>
Content
</div>
<div class='bottom-right content-box'>
Content
</div>
</div>
</div>
https://www.w3schools.com/cssref/css3_pr_flex-direction.asp
display: flex;
flex-direction: column;
I don't know how to float my button right and I hope someone can help me out here.
The yellow color shows the background of the div. The width of the div is set to 50%.
.faq {
width: 100%;
padding: 12px 20px;
display: block;
box-sizing: border-box;
width: 50%;
margin: auto;
margin-top: 30px;
}
.outerDiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 20px;
background-color: yellow;
}
.save {
float: right;
background-color: red;
}
<div class="outerDiv">
<h2>New FAQ</h2>
<input type="text" class="faq">
<br>
<button class="save" mat-raised-button color="primary">Primary</button>
</div>
What am I doing wrong?
Floats do not work in a flex container
Use align-self:flex-end instead
.faq {
padding: 12px 20px;
display: block;
box-sizing: border-box;
width: 50%;
margin: auto;
margin-top: 30px;
}
.outerDiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 20px;
background-color: yellow;
}
.save {
align-self:flex-end;
background-color: red;
}
<div class="outerDiv">
<h2>New FAQ</h2>
<input type="text" class="faq">
<br>
<button class="save" mat-raised-button color="primary">Primary</button>
</div>
.faq {
width: 100%;
padding: 12px 20px;
display: block;
box-sizing: border-box;
width: 50%;
margin: auto;
margin-top: 30px;
}
.outerDiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 20px;
background-color: yellow;
}
.save {
margin-left:auto;
background-color: red;
}
<div class="outerDiv">
<h2>New FAQ</h2>
<input type="text" class="faq">
<br>
<button class="save" mat-raised-button color="primary">Primary</button>
</div>
Floats do not work with flex.
There are two approaches that you can take here.
Approach #1:
Use align-self: flex-end on the button. This would make the button appear in the rightmost corner of your parent.
Approach #2:
In case you want more control over the position of the button in terms of alignment with the text area, you can wrap the button in a div and keep the float right on the button.
HTML
<div class="button-wrapper">
<button class="save" mat-raised-button color="primary">Primary</button>
</div>
CSS
.button-wrapper {
width: 50%; /* same as the width of your input*/
}
There seems to be a problem in this next piece of code. Testing on Chrome, there is a difference of just .5 px between height and width, but when switching to device mode, the difference gets bigger (almost 10px). I do have a <meta name="viewport" content="width=device-width, initial-scale=1.0"> set.
What I need: perfect squares and perfect circles. Flexbox is used and I don't want this :after fix used to create perfect squares. What am I doing wrong?
body {
max-inline-size: 1440px;
margin: 0 auto;
}
.oc {
display: flex;
justify-content: flex-start;
}
.ic {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.lc {
display: flex;
justify-content: stretch;
align-items: stretch;
border-radius: 25%;
border: solid 1px black;
margin: 1px;
padding: 20px;
flex: 1;
block-size: calc(50vw - 52px);
}
.abc {
font-size:90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: solid 1px black;
flex-grow: 1;
}
#media screen and (min-width: 768px) {
.abc {
font-size: 180px;
}
}
#media screen and (min-width: 1024px) {
.oc {
flex-wrap: wrap;
}
.ic {
flex-direction: row;
flex-basis: 100vw;
}
.lc {
block-size: calc(33vw - 46px);
}
}
#media screen and (min-width: 1440px) {
.lc {
block-size: calc((1440px / 3) - 46px);
}
}
<div class="oc">
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
</div>
Not sure why you don't want to use the padding trick but it's the way to go. Your calculation won't be accurate using vw unit because you need to account for the scrollbar width
body {
max-inline-size: 1440px;
margin: 0 auto;
}
.oc {
display: flex;
justify-content: flex-start;
}
.ic {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.lc {
display: flex;
justify-content: stretch;
align-items: stretch;
border-radius: 25%;
border: solid 1px black;
margin: 1px;
padding: 20px;
flex: 1;
}
/* this will do the trick */
.lc .abc::before {
content:"";
padding-top:100%;
}
/**/
.abc {
font-size: min(90px,18vw);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: solid 1px black;
flex-grow: 1;
}
#media screen and (min-width: 768px) {
.abc {
font-size: 180px;
}
}
#media screen and (min-width: 1024px) {
.oc {
flex-wrap: wrap;
}
.ic {
flex-direction: row;
flex-basis: 100vw;
}
}
<div class="oc">
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
</div>
If you insist on using vw you need to adjust the code like below. Notice how you will have perfect square but I had to hide the scrollbar to get the result:
body {
max-inline-size: 1440px;
margin: 0 auto;
overflow:hidden;
}
.oc {
display: flex;
justify-content: flex-start;
}
.ic {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.lc {
display: flex;
justify-content: stretch;
align-items: stretch;
border-radius: 25%;
border: solid 1px black;
margin: 1px;
padding: 20px;
flex: 1;
block-size: calc(50vw - 2px); /* remove only margin */
box-sizing:border-box; /* you don't have to care about padding and border*/
}
.abc {
font-size: 90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: solid 1px black;
flex: 1;
}
#media screen and (min-width: 768px) {
.abc {
font-size: 180px;
}
}
#media screen and (min-width: 1024px) {
.oc {
flex-wrap: wrap;
}
.ic {
flex-direction: row;
flex-basis: 100vw;
}
.lc {
block-size: calc(calc(100vw/3) - 2px);
}
}
#media screen and (min-width: 1440px) {
.lc {
block-size: calc((1440px / 3) - 2px);
}
}
<div class="oc">
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
</div>
I got this flex-box problem,
i got 2 divs contained in 1 div, each one of the is a flexbox too, the Divs pop out of the parent div,
i want them to never move out the parent divs dimensions,
the divs go over the table below them at the moment,
how do i accomplish this?
Another Question: I would like to ask is, in the div named container i got a table,
i want that table to be dead center of the div, and of course never collide with the footer or header
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0
}
.main {
display: flex;
flex-direction: column;
text-align: center;
height: 100vh;
}
.header {
display: flex;
flex-direction: column;
justify-content: space-evenly;
/* flex-wrap: wrap; */
height: 20%;
}
.header h1 {
width: 100%;
}
.secondHeader {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.levels {
display: flex;
flex-direction: row;
justify-content: space-evenly;
background: green;
margin: 5px;
}
.main-Game-Body {
display: flex;
flex-direction: row-reverse;
height: 72%;
margin: 5px;
padding: 4px;
}
.container {
flex-grow: 1;
}
.footer {
height: 8%;
margin: 4px;
}
<div class="main">
<div class="header">
<h1>Welcome To Minesweeper</h1>
<div class="secondHeader">
<button class="hints" onclick="activateHintMode()">
You Have: <span></span> Hints Left
</button>
<button class="safe" onclick="safeClick()">
You Have: <span></span> safe clicks Left
</button>
<button class="lives">You Have: <span></span> Lives Left</button>
<button class="backUp" onclick="stepBack()">stepBack</button>
</div>
<div class="levels">
<button class="manual" onclick="manualMode()">
Manual Mode
</button>
<button class="level" onclick="easyMode()">Easy Mode</button>
<button class="level" onclick="hardMode()">Hard Mode</button>
<button class="level" onclick="expertMode()">EXPERT</button>
</div>
</div>
<div class="main-Game-Body">
<!-- <button class="icon" onclick="restartLevel()"></button> -->
<div class="container"></div>
</div>
<div class="footer">
<div class="timer" onclick="timer()">
Your Score: <span class="stopwatch"></span> Best Score At Difficulty
<span class="difficulty"></span> is: <span class="results"></span>
</div>
</div>
</div>
This is not the issue with levels div. You have given static height to each div that's why the content is trying to fit in that height. When you try to increase the margin the element treis to reside inside the container height resulting in moving the items above levels div outside the container.
Solution: Remove static height for header, main-Game-Body and footer, use flex-grow: 1 for main-Game-Body this will help fitting the content in remaining height.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0
}
.main {
display: flex;
flex-direction: column;
text-align: center;
height: 100vh;
}
.header {
display: flex;
flex-direction: column;
justify-content: space-evenly;
/* height: 20%; */
}
.header h1{
width: 100%;
}
.secondHeader {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.levels {
display: flex;
flex-direction: row;
justify-content: space-evenly;
background: green;
margin: 5px;
}
.main-Game-Body {
display: flex;
flex-direction: row-reverse;
/* height: 72%; : Do not give height, use flex grow*/
flex-grow: 1;
margin: 5px;
padding: 4px;
}
.container {
flex-grow: 1;
}
.footer {
/* height: 8%; */
margin: 4px;
}
<div class="main">
<div class="header">
<h1>Welcome To Minesweeper</h1>
<div class="secondHeader">
<button class="hints" onclick="activateHintMode()">
You Have: <span></span> Hints Left
</button>
<button class="safe" onclick="safeClick()">
You Have: <span></span> safe clicks Left
</button>
<button class="lives">You Have: <span></span> Lives Left</button>
<button class="backUp" onclick="stepBack()">stepBack</button>
</div>
<div class="levels">
<button class="manual" onclick="manualMode()">
Manual Mode
</button>
<button class="level" onclick="easyMode()">Easy Mode</button>
<button class="level" onclick="hardMode()">Hard Mode</button>
<button class="level" onclick="expertMode()">EXPERT</button>
</div>
</div>
<div class="main-Game-Body">
<!-- <button class="icon" onclick="restartLevel()"></button> -->
<div class="container"></div>
</div>
<div class="footer">
<div class="timer" onclick="timer()">
Your Score: <span class="stopwatch"></span> Best Score At Difficulty
<span class="difficulty"></span> is: <span class="results"></span>
</div>
</div>
</div>
I want to create a layer from windows 10 calculator and i have some problem in height and width in it.
Any help would be appreciated.
Problems:
when i pull up the top of the result or increase the height of the browseer the calculator go up and a large space appear in the bottom of the calculator and i don't know why is that.
when i decrease the width of the window instead of decrease the width of buttons calculator go right and some buttons won't display.
when i decrease the height of window it won't stop any where but i want to stop it in 500 px height;
This is my code.
html:
<!DOCTYPE html>
<html>
<head>
<link href="./calculator.css" rel="stylesheet" type="text/css">
<title>Windows10 Calculator</title>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<div class="container">
<div class="calculator-container">
<div class="top-navbar">
<p id="calculator">
Calculator
</p>
<div class="close-bar">
<a id="minimize">-</a>
<a id="maximize">🗆</a>
<a id="close">x</a>
</div>
</div>
<div class="calculator-screen">
<div class="top-screen">
<a id="calculator-menu">≡</a>
<p id="standard">
Standard
</p>
</div>
<div class="result"><span id="result">4</span></div>
<div class="m-row">
<a id="MC">MC</a>
<a id="MR">MR</a>
<a id="Mplus">M+</a>
<a id="Mminus">M-</a>
<a id="MS">MS</a>
</div>
</div>
<hr />
<div class="functions">
<div class="row">
<a class="hide-in-big blue">%</a>
<a class="hide-in-big blue">√</a>
<a class="lucida-font hide-in-big blue"><p>
x<sup>2</sup>
</p></a>
<a class="lucida-font hide-in-big blue"><p><sup>1</sup>∕<sub>x</sub></p></a>
</div>
<div class="row">
<a class="show-in-big blue">%</a>
<a class="cs blue">CE</a>
<a class="cs blue">C</a>
<a class="blue"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABDklEQVRYR+2W4Q3CIBSErxu4iY6gm+hmbqIj6CZuUHNJMeQFeAelaUzoT8LjPo570Ak7f9PO+hgAw4G/cuAA4AHg1KFzfhtXHegpTv4qgFj8DeAM4NPowrzUyQA9xaldBaCIc451IzUWDJMBFPE7gCOASwQR6l4AboljkgAUcc55LgAUIwS/0CW5rLgAinjYmIXgOFu0FNQiQI14CoJjXpe4ANZWr93s/RCOI1cnHYEKYR2jAwxlCcIF4CKpgKVazQaOtR68BKBCsA0ZuvhmDPB04drahrmUx/0ez9nkIqqBqHkW5COIF1UyoUI0AdhMqGKlefJrmHNiLUQTwFrRZL36R7SJOBcdAMOB3R34AqM1YCEu+sgCAAAAAElFTkSuQmCC" /></a>
<a class="hover-blue blue">\[\div\]</a>
</div>
</div>
<div class="numpad">
<div class="row">
<a class="lucida-font show-in-big blue">√</a>
<a class="number">7</a>
<a class="number">8</a>
<a class="number">9</a>
<a class="hover-blue blue">×</a>
</div>
<div class="row">
<a class="lucida-font show-in-big blue"><p>
x<sup>2</sup>
</p>
<a class="number">4</a>
<a class="number">5</a>
<a class="number">6</a>
<a class="hover-blue blue">-</a>
</div>
<div class="row">
<a class="lucida-font show-in-big blue"><p>
x<sup>3</sup>
</p></a>
<a class="number">1</a>
<a class="number">2</a>
<a class="number">3</a>
<a class="hover-blue blue">+</a>
</div>
<div class="row">
<a class="lucida-font show-in-big blue"><p><sup>1</sup>∕<sub>x</sub></p></a>
<a class="blue">±</a>
<a class="number">0</a>
<a class="blue">∙</a>
<a class="hover-blue blue">=</a>
</div>
</div>
</div>
<div class="history-memory">
<div>
<div class="hidden-close-bar">
<a id="minimize">ー</a>
<a id="maximize">🗆</a>
<a id="close">྾</a>
</div>
<div class="history-memory-bar">
<a id="history">History</a>
<a id="memory">Memory</a>
</div>
</div>
<div class="history-memory-screen">
<span class="grey"> 2×2=</span>
<span class="black">4</span>
<span class="grey">9999+1=</span>
<span class="black">10000</span>
</div>
</div>
</div>
</body>
CSS:
#font-face{
src:
url("//db.onlinewebfonts.com/t/efbd8f0d869bf61fbe0f139a1602cda8.woff2");
font-family:"lucida calligraphy";
}
body{
min-width: 500px;
width: auto !important;
margin: 0 !important;
overflow: hidden;
font-family: Segoe UI;
}
.close-bar, .hidden-close-bar{
margin-right: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.container{
min-width: 800px;
min-height: 800px;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
overflow-y: hidden;
background-color: #E6E6E6;
}
.calculator-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between !important;
}
.top-navbar{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.top-navbar p {
margin-left: 10px;
}
.top-screen a{
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.top-screen p{
display: flex;
align-items: center;
justify-content: center;
}
.calculator-screen{
display: flex;
flex-direction: column;
}
.top-screen{
display: flex;
flex-direction: row;
}
.top-screen * {
margin: 1%;
font-size: 2em;
}
.result{
height: 15vh;
display: flex;
justify-content: flex-end;
font-size: 4em;
font-family: Segoe UI;
font-weight: bold;
}
.row{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: bottom
}
.cs{
font-size: 1.5em !important;
}
.m-row{
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.m-row a{
margin-left: 7%;
cursor: pointer;
}
#standard{
font-size: 1.5em;
margin-left: 3%;
}
.row a {
width: 25%;
height: 10%;
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
margin: 1px;
cursor: pointer;
font-size: 2em;
}
.row a:hover{
background-color: #B1B2B5;
}
.blue{
background-color: #F0F0F0;
font-weight: 300;
}
.number{
background-color: #FAFAFA;
font-weight: bold;
font-size: 1.5em !important;
}
.history-memory{
display: none;
}
.history-memory a {
cursor: pointer;
font-size: 1.5em;
}
.row .hide-in-big{
display: flex;
justify-content: center;
align-items: center;
}
.row .show-in-big{
display: none;
}
.hidden-close-bar{
display: none;
}
.close-bar {
margin: 1px;
}
#history {
border-bottom: 2px solid #0097A7;
margin-right: 10%;
}
#trash-can {
display: flex;
justify-content: flex-end;
align-items: center;
margin: 10px;
background-color: #aad3ef;
cursor: default;
}
#trash-can img {
width: 15%;
cursor: pointer;
background-color: #aad3ef;
}
.history-memory-screen{
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 10%;
height: 100%;
}
.history-memory-bar{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.grey{
align-self: flex-end;
color: #616161;
margin: 5px;
margin-right: 5px;
}
.black{
align-self: flex-end;
justify-self: flex-end;
margin: 5px;
margin-right: 5px;
}
.lucida-font{
font-family:"lucida calligraphy" !important;
font-size: 1em !important;
font-weight: bold !important;
}
.hover-blue:hover{
background-color: #1C87DB !important;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#media screen and (max-width: 800px){
.calculator-container{
width: 100%;
height: 100%
}
.row .show-in-big{
display: none;
}
.row .hide-in-big {
display: flex;
justify-content: center;
align-items: center;
}
}
#media screen and (min-width:800px){
.history-memory{
display: flex;
width: 40%;
flex-direction: column;
justify-content: space-between;
}
.hidden-close-bar{
display: block;
text-align: right;
}
.hidden-close-bar a{
margin: 1px;
}
.close-bar {
display: none;
}
}
#media screen and (min-width: 1000px){
.row .hide-in-big{
display: none;
}
.row .show-in-big {
display: flex;
justify-content: center;
align-items: center;
}
}
and this is the link to jsfiddle of my code
problem number 1: since you use min-height, you should define the height of your paren. In your case it is body so this will solve the 1st problem:
body{
/* other stuff */
height: 100vh; /* or whatever px, em, etc., except % */
}
problem number 2: As I understand, the problem appears with the 'M' buttons, since all others seem to be resized correctly... so if you add max-width to the .m-row a it would prevent overflow. You also could add the font-size in vw as you did for the other buttons, though I wouldn't do this because all the texts become unreadable in a small window.
.m-row a{
margin-left: 7%;
max-width: 13%; /* because you have 5 buttons (each 20%) - 7% of your margin-left*/
}
problem number 3: You could open a new window with specified dimensions with some javascript and control it's size with window.resizeTo. However I think some browsers won't allow this.. So instead I would simply add min-width, min-height add overflow: auto to the parent (in your case the body).
I hope it helps.