Skip to content

Commit cd7edf6

Browse files
committed
make fluid and non-fluid containers always have same width and padding
1 parent d7f3de6 commit cd7edf6

File tree

1 file changed

+18
-21
lines changed

1 file changed

+18
-21
lines changed

web_src/css/base.css

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -888,19 +888,32 @@ img.ui.avatar,
888888
.page-content .ui.ui.ui.container:not(.fluid) {
889889
width: 1280px;
890890
max-width: calc(100vw - 64px);
891+
margin-left: auto;
892+
margin-right: auto;
893+
}
894+
895+
.ui.container.fluid.padded {
896+
padding: 0 32px;
891897
}
892898

893899
/* enable fluid page widths for medium size viewports */
894900
@media (min-width: 768px) and (max-width: 1200px) {
895-
.ui.ui.ui.container:not(.fluid) {
896-
width: calc(100vw - 64px);
901+
.page-content .ui.ui.ui.container:not(.fluid) {
902+
width: calc(100vw - 32px);
903+
max-width: calc(100vw - 32px);
904+
}
905+
.ui.container.fluid.padded {
906+
padding: 0 16px;
897907
}
898908
}
899909

900-
@media only screen and (max-width: 767px) {
910+
@media (max-width: 767px) {
901911
.page-content .ui.ui.ui.container:not(.fluid) {
902-
width: auto; /* copied from semantic css */
903-
max-width: 100%;
912+
width: calc(100vw - 16px);
913+
max-width: calc(100vw - 16px);
914+
}
915+
.ui.container.fluid.padded {
916+
padding: 0 8px;
904917
}
905918
}
906919

@@ -1160,16 +1173,6 @@ img.ui.avatar,
11601173
float: right;
11611174
}
11621175

1163-
.ui.container.fluid.padded {
1164-
padding: 0 32px;
1165-
}
1166-
1167-
@media (max-width: 767px) {
1168-
.ui.container.fluid.padded {
1169-
padding: 0 8px;
1170-
}
1171-
}
1172-
11731176
.ui.form .ui.button {
11741177
font-weight: var(--font-weight-normal);
11751178
}
@@ -1554,12 +1557,6 @@ img.ui.avatar,
15541557
clip: auto;
15551558
}
15561559

1557-
@media (min-width: 768px) and (max-width: 991px) {
1558-
.ui.container {
1559-
width: 95%;
1560-
}
1561-
}
1562-
15631560
.ui.menu.new-menu {
15641561
margin-bottom: 15px;
15651562
background: var(--color-navbar);

0 commit comments

Comments
 (0)