Move from max-w-screen-xl to max-w-7xl

src/components/blog/HighlightedPosts.astro

@@ -23,7 +23,7 @@ const {
 const posts = await findPostsByIds(postIds);
 ---
 
-<section class="px-4 py-16 mx-auto max-w-screen-xl lg:py-20">
+<section class="px-4 py-16 mx-auto max-w-7xl lg:py-20">
   <div class="flex flex-col lg:justify-between lg:flex-row mb-8">
     <div class="md:max-w-sm">
       {

src/components/blog/LatestPosts.astro

@@ -23,7 +23,7 @@ const {
 const posts = await findLatestPosts({ count });
 ---
 
-<section class="px-4 py-16 mx-auto max-w-screen-xl lg:py-20">
+<section class="px-4 py-16 mx-auto max-w-7xl lg:py-20">
   <div class="flex flex-col lg:justify-between lg:flex-row mb-8">
     <div class="md:max-w-sm">
       {

src/components/widgets/Content.astro

@@ -56,7 +56,7 @@ const {
       )
     }
   </div>
-  <div class="mx-auto max-w-screen-xl p-4 md:px-8">
+  <div class="mx-auto max-w-7xl p-4 md:px-8">
     <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
       <div class="md:basis-1/2 self-center">
         {content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />}

src/components/widgets/FAQs.astro

@@ -43,7 +43,7 @@ const {
       )
     }
   </div>
-  <div class="max-w-screen-xl sm:mx-auto">
+  <div class="max-w-7xl sm:mx-auto">
     <div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
       {
         items &&

src/components/widgets/Features2.astro

@@ -24,7 +24,7 @@ const {
 
 <section class="relative">
   <div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
-  <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 -mb-12">
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 -mb-12">
     <div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
       {
         (title || subtitle || highlight) && (

src/components/widgets/Footer.astro

@@ -28,7 +28,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
 
 <footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800']}>
   <div class="dark:bg-dark absolute inset-0 pointer-events-none" aria-hidden="true"></div>
-  <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 dark:text-slate-300">
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300">
     <div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
       <div class="col-span-12 lg:col-span-4">
         <div class="mb-2">

src/components/widgets/Header.astro

@@ -47,7 +47,7 @@ const {
   ]}
   id="header"
 >
-  <div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-screen-xl">
+  <div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-7xl">
     <div class:list={[{"mr-auto": position === "right"}, "flex justify-between"]}>
       <a class="flex items-center" href={getHomePermalink()}>
         <Logo />

src/components/widgets/Hero.astro

@@ -28,7 +28,7 @@ const {
 
 <section class="relative md:-mt-[76px]">
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
-  <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6">
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
     <div class="py-12 md:py-20">
       <div class="text-center pb-10 md:pb-16 max-w-screen-lg mx-auto">

src/components/widgets/Hero2.astro

@@ -28,7 +28,7 @@ const {
 
 <section class="relative md:-mt-[76px]">
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
-  <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6">
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
     <div class="py-12 md:py-20 lg:py-0 lg:flex lg:items-center lg:h-screen lg:gap-8">
       <div class="basis-1/2 text-center lg:text-left pb-10 md:pb-16 mx-auto">
@@ -42,7 +42,7 @@ const {
         }
         <div class="max-w-3xl mx-auto lg:max-w-none">
           {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
-          <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-screen-xl">
+          <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-7xl">
             {
               callToAction && (
                 <div class="flex w-full sm:w-auto">

src/components/widgets/Steps2.astro

@@ -64,7 +64,7 @@ const {
 ---
 
 <section>
-  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 overflow-hidden">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 overflow-hidden">
     <div class="py-12 md:py-20">
       <div class="py-4 sm:py-6 lg:py-8">
         <div class="flex flex-wrap md:-mx-8">

src/pages/index.astro

@@ -29,7 +29,7 @@ const meta = {
     image={{ src: import('~/assets/images/hero.png'), alt: 'AstroWind Hero Image' }}
   >
     <Fragment slot="title">
-      Free template for <span class="hidden lg:inline">create your website <br />with</span>
+      Free template for <span class="hidden lg:inline">create your website <br  class="xl:hidden"  />with</span>
       <span class="text-accent dark:text-white highlight"> Astro 2.0</span> + Tailwind CSS
     </Fragment>