feat: hide cards on small screens

2026-03-10 23:30:23 -05:00
parent f030da549e
commit e2f5bbbe9c
2 changed files with 10 additions and 8 deletions
--- a/src/components/sections/WeatherSection.astro
+++ b/src/components/sections/WeatherSection.astro
@@ -24,13 +24,15 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
  </div>
  ) : (
  <div class="flex flex-wrap justify-center gap-4 lg:gap-6">
-    {forecastDays.map((forecastDay) => (
-    <WeatherCard
-      dayName={forecastDay.dayName}
-      label={forecastDay.label}
-      icon={forecastDay.icon}
-      temp={forecastDay.temp}
-    />
+    {forecastDays.map((forecastDay, index) => (
+    <div class={index === 3 ? "hidden min-[800px]:block" : index >= 4 ? "hidden min-[1100px]:block" : ""}>
+      <WeatherCard
+        dayName={forecastDay.dayName}
+        label={forecastDay.label}
+        icon={forecastDay.icon}
+        temp={forecastDay.temp}
+      />
+    </div>
    ))}
  </div>
  )}