diff --git a/site/content/docs/5.0/examples/heroes/index.html b/site/content/docs/5.0/examples/heroes/index.html
index 43138d567c5c..7d553a16bad5 100644
--- a/site/content/docs/5.0/examples/heroes/index.html
+++ b/site/content/docs/5.0/examples/heroes/index.html
@@ -57,13 +57,13 @@ <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image<
 <div class="b-example-divider"></div>
 
 <div class="container col-xl-10 col-xxl-8 px-4 py-5">
-  <div class="row align-items-center g-5 py-5">
+  <div class="row align-items-center g-lg-5 py-5">
     <div class="col-lg-7 text-center text-lg-start">
       <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
       <p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
     </div>
-    <div class="col-10 mx-auto col-lg-5">
-      <form class="p-5 border rounded-3 bg-light">
+    <div class="col-md-10 mx-auto col-lg-5">
+      <form class="p-4 p-md-5 border rounded-3 bg-light">
         <div class="form-floating mb-3">
           <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
           <label for="floatingInput">Email address</label>