Fixed for mobile?

app/page.tsx

@@ -17,7 +17,7 @@ export default function Home() {
 
   return (
     <main>
-      <div className='mx-auto max-w-3xl text-center'>
+      <div className='mx-auto max-w-xs sm:max-w-md md:max-w-xl text-center'>
         <LocationContext.Provider value={contextValue}>
           <LocationSearch />
           <WeatherNow />

components/DailyCard/CardContainer.tsx

@@ -0,0 +1,20 @@
+import { Forecast } from "@/types/types";
+import DailyCard from "./DailyCard";
+
+export default function CardContainer(props: {weather: Forecast}) {
+    const weather = props.weather;
+    return (
+        <div className="flex overflow-scroll justify-center">
+        {weather.daily && weather.daily.apparent_temperature_max.map((temp, index) => (
+          index > 0 && 
+          index < 7 && // Ensure we only render the next 6 days
+          <DailyCard
+            key={index}
+            temperature={temp}
+            weatherCode={weather.daily.weather_code[index]}
+            time={weather.daily.time[index]}
+          />
+        ))}
+      </div>
+    )
+};

components/DailyCard/DailyCard.tsx

@@ -8,7 +8,7 @@ export default function DailyCard(props: DailyCardPropType) {
     const weatherCode = props.weatherCode
     const temperature = props.temperature
     return (
-        <div className="m-2 text-center shadow-md border-slate-200 border-2 rounded">
+        <div className="m-1 p-2 text-center shadow-md border-slate-200 border-2 rounded">
             <WeatherIcon weatherCode={weatherCode}/>
             <DailyTemp temperature={temperature} />
             <DailyTime time={time} />

components/DailyCard/DailyTemp.tsx

@@ -2,6 +2,6 @@
 export default function DailyTemp(props: {temperature: number;}) {
     const feels = props.temperature;
     return (
-    <p className="my-2">{feels}°C</p>
+    <p className="">{feels}°C</p>
     )
 }

components/DailyCard/DailyTime.tsx

@@ -1,7 +1,9 @@
-import { headers } from "next/headers";
+import weekday from "@/utils/functions/weekday"
+
 
 export default function DailyTime(props: {time: string}) {
+    const day = weekday(props.time);
     return(
-        <p>{props.time}</p>
+        <p className="text-sm">{day}</p>
     )
 }

components/Temperature.tsx

@@ -7,6 +7,6 @@ export default function Temperature() {
     const { weather } = useContext(WeatherContext)
     const feels = weather.current.apparent_temperature;
     return (
-    <p>{feels}°C</p>
+    <p className="text-2xl mt-2">{feels}°C</p>
     )
 }

components/WeatherHero.tsx

@@ -85,7 +85,7 @@ export default function WeatherHero() {
     const weatherCode = weather.current.weather_code;
     return(
     <>
-    <Image className="h-64 mx-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
+    <Image className="h-64 w-auto mx-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
     </>
 )
 };

components/WeatherIcon.tsx

@@ -81,8 +81,8 @@ function getCurrentWeatherIcon(weatherCode: number) {
 export default function WeatherIcon(props: {weatherCode: number}) {
     const weatherCode = props.weatherCode
     return (
-    <div className="p-2 h-16">
-        <Image className="h-12" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
+    <div className="h-12">
+        <Image className="mt-2 max-h-12 mx-auto w-auto" src={getCurrentWeatherIcon(weatherCode)} alt="Weather icon"/>
     </div>
 )
 };

components/WeatherNow.tsx

@@ -8,6 +8,7 @@ import { defaultHourlyForecast } from "@/app/defaultState";
 import { LocationContext } from "@/context/LocationContext";
 import WeatherHero from "./WeatherHero";
 import DailyCard from "./DailyCard/DailyCard";
+import CardContainer from "./DailyCard/CardContainer";
 
 export const WeatherContext = createContext<WeatherContextType>({
   weather: defaultHourlyForecast,
@@ -42,19 +43,8 @@ export default function WeatherNow() {
       <WeatherContext.Provider value={contextValue}>
         <WeatherHero />
         <Temperature />
-        <h2 className="mt-4 text-xl">And the forecast for the coming week</h2>
-        <div className="flex h-full">
-          {weather.daily && weather.daily.apparent_temperature_max.map((temp, index) => (
-            index > 0 && 
-            index < 7 && // Ensure we only render the next 6 days
-            <DailyCard
-              key={index}
-              temperature={temp}
-              weatherCode={weather.daily.weather_code[index]}
-              time={weather.daily.time[index]}
-            />
-          ))}
-        </div>
+        <h2 className="mt-2 text-xl">And the forecast for the coming week</h2>
+        <CardContainer weather={weather}/>
       </WeatherContext.Provider>
     </div>
   );

utils/functions/weekday.ts

@@ -0,0 +1,6 @@
+export default function weekday(date: string): string {
+    const newDate = new Date(date);
+    const dayNumber = newDate.getDay();
+    const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    return weekdays[dayNumber]; // Directly return the weekday string
+}