Skip to content

Commit 392a849

Browse files
authored
Bug fix: improve responsive layout of homepage documentation tiles (#249)
The documentation tiles on the homepage were stacking awkwardly at screen widths between 768px and 1090px. Modified the grid layout to create a more natural 2x2 layout at these intermediate screen sizes, ensuring consistent spacing and better visual organization. <img width="1023" alt="Screenshot 2025-04-24 at 4 53 59 PM" src="https://github.com/user-attachments/assets/237bce45-1cec-46ad-925a-766d0627fd93" /> <img width="480" alt="Screenshot 2025-04-24 at 4 54 13 PM" src="https://github.com/user-attachments/assets/ee8e564a-44d1-45f4-914b-248787ae9340" /> Signed-off-by: Daniel Phillips <[email protected]>
1 parent d904d3b commit 392a849

File tree

1 file changed

+13
-2
lines changed

1 file changed

+13
-2
lines changed

sass/_valkey.scss

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1073,6 +1073,19 @@ pre table {
10731073

10741074
.documentation-card-grid {
10751075
margin-top: 4rem;
1076+
1077+
@media (max-width: 1100px) {
1078+
.col {
1079+
flex: 1 1 50%;
1080+
margin-bottom: 3rem;
1081+
}
1082+
}
1083+
1084+
@media (max-width: 768px) {
1085+
.col {
1086+
flex: 1 1 100%;
1087+
}
1088+
}
10761089
}
10771090

10781091
.documentation-card {
@@ -1083,10 +1096,8 @@ pre table {
10831096
border-radius: 20px;
10841097
color: white;
10851098
background: #2d2471;
1086-
margin-bottom: 3rem;
10871099

10881100
@include respond-min(768px) {
1089-
margin-bottom: 0;
10901101
min-height: 100%;
10911102
}
10921103

0 commit comments

Comments
 (0)