Merge branch 'fix-breakpoint' into 'develop'

Fix UI at width 895px

See merge request soapbox-pub/soapbox-fe!778
This commit is contained in:
Alex Gleason 2021-09-24 14:36:33 +00:00
commit 376c086646
7 changed files with 11 additions and 11 deletions

View file

@ -90,7 +90,7 @@
width: 100%;
position: relative;
background: var(--background-color);
@media (min-width: 895px) { height: 74px; }
@media (min-width: 896px) { height: 74px; }
}
&__avatar {
@ -152,7 +152,7 @@
max-width: 1200px;
box-sizing: border-box;
position: relative;
@media (min-width: 895px) and (max-width: 1190px) {
@media (min-width: 896px) and (max-width: 1190px) {
max-width: 900px;
padding-left: 300px;
}

View file

@ -45,7 +45,7 @@
@media screen and (max-width: 375px) {
padding: 0 10px;
}
@media screen and (min-width: 895px) {
@media screen and (min-width: 896px) {
margin: 0 20px;
padding: 0;
}

View file

@ -7,7 +7,7 @@
flex-direction: column;
flex: 1 1;
@media (min-width: 895px) {
@media (min-width: 896px) {
padding-top: 60px;
}
}

View file

@ -125,7 +125,7 @@
padding: 25px 0;
background-color: var(--accent-color--med);
@media (min-width: 895px) {
@media (min-width: 896px) {
display: block;
}
}
@ -154,7 +154,7 @@
}
}
@media (min-width: 895px) and (max-width: 1190px) {
@media (min-width: 896px) and (max-width: 1190px) {
&__title-text,
&__type-filters-tabs {
max-width: 900px;

View file

@ -107,7 +107,7 @@
font-size: 18px;
color: #fff;
@media (min-width: 895px) {
@media (min-width: 896px) {
display: none;
}
}
@ -190,7 +190,7 @@
}
&--search {
@media (min-width: 895px) {
@media (min-width: 896px) {
display: none;
}
}
@ -215,7 +215,7 @@
}
.icon-with-counter__counter {
@media screen and (min-width: 895px) {
@media screen and (min-width: 896px) {
left: 5px;
}
}

View file

@ -11,6 +11,6 @@ body.demetricator {
.account__header__bar {
min-height: 50px;
@media (min-width: 895px) { height: 50px; }
@media (min-width: 896px) { height: 50px; }
}
}

View file

@ -335,7 +335,7 @@
z-index: 105;
background: var(--foreground-color);
@media (min-width: 895px) {
@media (min-width: 896px) {
top: -290px;
position: sticky;
}