fix: more styling on mobile improvement
This commit is contained in:
parent
4ed010af41
commit
ef98fc754d
2 changed files with 11 additions and 8 deletions
|
@ -44,6 +44,10 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs::before,
|
.tabs::before,
|
||||||
|
@ -57,7 +61,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-switch {
|
.tab-switch {
|
||||||
|
@ -66,7 +69,7 @@
|
||||||
|
|
||||||
.tab-label {
|
.tab-label {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 8rem;
|
width: 6rem;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.25s;
|
transition: all 0.25s;
|
||||||
|
@ -112,7 +115,7 @@
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
.tab-label {
|
.tab-label {
|
||||||
width: 4rem;
|
width: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-label .label {
|
.tab-label .label {
|
||||||
|
@ -120,13 +123,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (max-width: 400px) {
|
||||||
.tab-label {
|
.tab-label {
|
||||||
width: 2.75rem;
|
width: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-label .label {
|
.tab-label .label {
|
||||||
font-size: x-small;
|
font-size: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -165,7 +165,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.5rem;
|
top: 0.5rem;
|
||||||
right: 0.5rem;
|
right: 0.5rem;
|
||||||
display: flex;
|
display: none; /* flex; */
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -206,7 +206,7 @@
|
||||||
|
|
||||||
#talk .message-container .info-container {
|
#talk .message-container .info-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: -1.5rem;
|
margin-bottom: -1.75rem;
|
||||||
height: 3.75rem;
|
height: 3.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue