@ethicdevs/gitfoss | Show object: 8758f266e6fc1df0cd9d5676f776e76e147e4ae1 ∙ GitFOSS
chore(resp.): make mobile wrap coherent
+ 15
- 0
app/views/HomeView.tsx
@@ -12,6 +12,7 @@ import { Grid } from "../components/Grid";
 import { Layout } from "../components/Layout";
 import { PageWrapper } from "../components/PageWrapper";
 import { buildRouteLink } from "../utils/shared";
+import { breakpoints } from "../utils/style";
 
 export interface HomeViewProps extends CommonProps {
   foo?: boolean;

...
@@ -229,6 +230,9 @@ const HomeView: ReactView<HomeViewProps> = (props) => {
               <style>{`
                 .feature-section {
                   display: flex;
+                  width: 100%;
+                  min-height: 80vh;
+                  flex-direction: row;
                   align-items: center;
                   gap: 48;
                   flex-wrap: wrap;

...
@@ -236,6 +240,17 @@ const HomeView: ReactView<HomeViewProps> = (props) => {
                 .is-even {
                   flex-direction: row-reverse;
                 }
+                @media (max-width: ${breakpoints.sm}) {
+                  .feature-section {
+                    flex-direction: column;
+                  }
+                  .is-even {
+                    flex-direction: column-reverse;
+                  }
+                  .is-odd {
+                    flex-direction: column;
+                  }
+                }
               `}</style>
               {isEven && (
                 <div className="feature-section is-even">