style: slicing home page, adjust for mobile view

slicing home page, adjust for mobile view
2025-02-20 01:37:35 +07:00
parent fe441ad5ac
commit f17627bdf2
13 changed files with 412 additions and 128 deletions
@@ -12,15 +12,16 @@ const NewsLayout = () => {
        <HeaderTop />
        <HeaderMenu />
      </header>
-      <div className="mx-[50px] my-[25px] grid gap-y-[25px]">
+      <div className="grid sm:mx-[50px] sm:my-[25px] sm:gap-y-[25px]">
        <img
          src="/images/banner.png"
          alt="banner"
-          className="h-[100px] w-full object-contain"
+          className="h-[50px] w-full object-fill sm:h-[100px] sm:object-contain"
        />
        <Outlet />
      </div>
-      <footer className="grid w-full grid-cols-5 gap-16 bg-[#2E2F7C] px-16 py-20 text-white">
+
+      <footer className="grid w-full grid-cols-1 gap-6 bg-[#2E2F7C] px-5 py-20 text-white sm:grid-cols-5 sm:gap-16 sm:px-16">
        <FooterNewsletter />
        <FooterLinks />
      </footer>