diff --git a/src/example/custom_scss/styles.scss b/src/example/custom_scss/styles.scss
index 7c7f685..f210760 100644
--- a/src/example/custom_scss/styles.scss
+++ b/src/example/custom_scss/styles.scss
@@ -106,11 +106,6 @@ div.wrapper-continer {
       @extend .theme-btn;
     }
   }
-  @media (max-width: 499px) {
-    .wrapper-continer {
-      display: grid;
-    }
-  }
 }
 
 .white-continer-claim {
@@ -135,6 +130,17 @@ img.course-image {
   margin-bottom: 10px;
 }
 
+/* Media query for screens 500px or smaller */
+@media (max-width: 500px) {
+  .course-info-banner {
+    display: grid;
+    /* Add your grid properties here, for example: */
+    grid-template-columns: 1fr 1fr; /* This creates two equal columns, adjust as needed */
+    gap: 10px; /* Adjust the gap between grid items if needed */
+  }
+}
+
+
 .course-info-banner2 {
   display: flex;
   justify-content: space-around;