made the box and buttons more responsive

This commit is contained in:
Yusuf İpek
2021-01-26 07:57:11 +03:00
parent 2bd4e8197c
commit ec9de62d7f
2 changed files with 21 additions and 5 deletions
+1 -1
View File
@@ -1 +1 @@
[{"/home/yusuf/Programming/React/quote-machine/src/index.js":"1","/home/yusuf/Programming/React/quote-machine/src/App.js":"2","/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx":"4","/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx":"5"},{"size":500,"mtime":1611491491707,"results":"6","hashOfConfig":"7"},{"size":641,"mtime":1611569283324,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611491491707,"results":"9","hashOfConfig":"7"},{"size":3064,"mtime":1611576938230,"results":"10","hashOfConfig":"7"},{"size":313,"mtime":1611576825130,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"zhej84",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],"/home/yusuf/Programming/React/quote-machine/src/App.js",[],"/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx",[],"/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx",[]]
[{"/home/yusuf/Programming/React/quote-machine/src/index.js":"1","/home/yusuf/Programming/React/quote-machine/src/App.js":"2","/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx":"4","/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx":"5"},{"size":500,"mtime":1611491491707,"results":"6","hashOfConfig":"7"},{"size":641,"mtime":1611569283324,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611491491707,"results":"9","hashOfConfig":"7"},{"size":3064,"mtime":1611576938230,"results":"10","hashOfConfig":"7"},{"size":313,"mtime":1611576825130,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1h1r0ga",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],"/home/yusuf/Programming/React/quote-machine/src/App.js",[],"/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx",[],"/home/yusuf/Programming/React/quote-machine/src/components/button/button.jsx",[]]
+20 -4
View File
@@ -2,7 +2,7 @@
display: flex;
justify-content: center;
align-content: center;
height: 954px;
height: 100vh;
#quote-box {
display: flexbox;
@@ -16,19 +16,19 @@
}
.writing {
padding-top: 130px;
padding-top: 16vh;
height: 150px;
text-align: center;
}
#new-quote {
margin-top: 100px;
margin-top: 150px;
float: right;
}
#tweet {
float: right;
margin-top: 100px;
margin-top: 150px;
margin-right: 15px;
}
@@ -41,4 +41,20 @@
a:active {
color: white;
}
@media only screen and (max-width: 500px) {
#new-quote,
#tweet {
margin-top: -150px;
}
#tweet {
margin-right: 115px;
}
}
@media only screen and (max-width: 350px) {
.writing {
h3 {
font-size: 22px;
}
}
}
}