Fix events grid layout

csarven · csarven · commit 76aaec8783d1 · 2024-04-05T21:13:09.000+02:00
Closes #858 #867
diff --git a/style/base.css b/style/base.css
@@ -398,8 +398,7 @@ footer>div>dl>dd>ul li img {
     #hosted-pod-services>div>ul li,
     #solid-organizations>div>ul li,
     #where-to-collaborate,
-    #using-solid,
-    #events>div>ul {
+    #using-solid {
         padding: 2rem;
         margin-right: 2rem;
     }
@@ -440,7 +439,6 @@ footer>div>dl>dd>ul li img {
     }
 
     #events li {
-        margin-right: 2rem;
         margin-bottom: 2rem;
     }
 
@@ -450,13 +448,14 @@ footer>div>dl>dd>ul li img {
     }
 
     #where-to-collaborate>div>ul,
-    #using-solid>div>ul,
-    #events>div>ul>li>details>ul {
+    #using-solid>div>ul {
         display: flex;
     }
 
-    #events>div>ul>li>details>ul li {
-        width: 25%;
+    #events>div>ul>li>details>ul {
+      display: grid;
+      grid-column-gap: 2%;
+      grid-template-columns: repeat(auto-fit, 23%);
     }
 
     #about section#features ul li a,

Original file line number	Diff line number	Diff line change
`@@ -398,8 +398,7 @@ footer>div>dl>dd>ul li img {`
`398`	`398`	`#hosted-pod-services>div>ul li,`
`399`	`399`	`#solid-organizations>div>ul li,`
`400`	`400`	`#where-to-collaborate,`
`401`		`- #using-solid,`
`402`		`- #events>div>ul {`
	`401`	`+ #using-solid {`
`403`	`402`	`padding: 2rem;`
`404`	`403`	`margin-right: 2rem;`
`405`	`404`	`}`
`@@ -440,7 +439,6 @@ footer>div>dl>dd>ul li img {`
`440`	`439`	`}`
`441`	`440`
`442`	`441`	`#events li {`
`443`		`- margin-right: 2rem;`
`444`	`442`	`margin-bottom: 2rem;`
`445`	`443`	`}`
`446`	`444`
`@@ -450,13 +448,14 @@ footer>div>dl>dd>ul li img {`
`450`	`448`	`}`
`451`	`449`
`452`	`450`	`#where-to-collaborate>div>ul,`
`453`		`- #using-solid>div>ul,`
`454`		`- #events>div>ul>li>details>ul {`
	`451`	`+ #using-solid>div>ul {`
`455`	`452`	`display: flex;`
`456`	`453`	`}`
`457`	`454`
`458`		`- #events>div>ul>li>details>ul li {`
`459`		`- width: 25%;`
	`455`	`+ #events>div>ul>li>details>ul {`
	`456`	`+ display: grid;`
	`457`	`+ grid-column-gap: 2%;`
	`458`	`+ grid-template-columns: repeat(auto-fit, 23%);`
`460`	`459`	`}`
`461`	`460`
`462`	`461`	`#about section#features ul li a,`