UI Bugs fixed

dipeshhhh · dipeshhhh · commit 2fd90d2288ea · 2023-10-04T14:48:20.000+05:30
- Added scrolling.
- Fixed stretched looking images (except the last one, please check the recommendation comment in the html file)
- Cursor now switches to pointer when hovering over any clickable item.
- Fixed UI breaking at &lt; 1220px width.
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 <body>
     <nav>
         <div class="sec-1">
-            <h3 href="index.html"><span>Code</span>Shop</h3>
+            <a href="index.html"><h3><span>Code</span>Shop</h3></a>
         </div>
         <div class="sec-2">
             <ul>
@@ -167,6 +167,7 @@ <h4>Iphone 14 Pro Max </h4>
         </div>
     </div>
 
+    <!-- Suggestion: use images with same height and width then remove the height settings in swiper's css. This will improve consistency in UI and eliminate the stretched image you problem see now. -->
     <!-- Swiper -->
     <div class="swiper">
         <!-- Additional required wrapper -->
diff --git a/style.css b/style.css
@@ -2,6 +2,12 @@
     margin: 0;
     padding: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    scroll-behavior: smooth;
+    box-sizing: border-box;
+}
+
+:root{
+    --mail-part-1-input-height: 6vh;
 }
 
 body{
@@ -75,6 +81,7 @@ nav:nth-child(2) {
 }
 
 .sec-3 ul li {
+    cursor: pointer;
     padding: 1vh 3vw;
 }
 
@@ -86,7 +93,7 @@ nav:nth-child(2) {
 
 .hero-sec img {
     width: 100%;
-    height: 85vh;
+    /* height: 85vh; */
 }
 
 
@@ -285,14 +292,15 @@ nav:nth-child(2) {
 
 .banner img {
     width: 50vw;
-    height: 40vh;
+    /* height: 40vh; */
 }
 
 
 /* this is swiper */
 .swiper {
     width: 58vw;
     height: 55vh;
+    /* height: min-content; */
     margin: 5vh 0;
 }
 
@@ -323,7 +331,7 @@ section {
 .mail-part-1 input {
     width: 35vw;
     border-radius: 5px;
-    height: 6vh;
+    height: var(--mail-part-1-input-height);
     background-color: transparent;
     padding: 0.5em;
     color: white;
@@ -333,7 +341,7 @@ section {
 .mail-part-1 button {
     margin: 1em;
     width: 6em;
-    height: 4vh;
+    height: var(--mail-part-1-input-height);
     background-color: transparent;
     color: #fff;
     font-size: 0.8em;
@@ -494,6 +502,11 @@ footer {
 }
 
 /* Responsive */
+@media only screen and (max-width: 1260px) {
+    .products-container .products-box img {
+        width: -webkit-fill-available;
+    }
+}
 @media only screen and (max-width: 600px) {
     nav {
         width: 100%;
@@ -591,7 +604,8 @@ footer {
 
     /* hero sec */
     .hero-sec img {
-        height: 15em;
+        /* height: 15em; */
+        width: 100%;
     }
 
     /* products title */
@@ -610,6 +624,9 @@ footer {
         height: auto;
         padding: 0
     }
+    .products-container .products-box img{
+        width: 11em;
+    }
 
     .products-box {
         width: 21vw !important;
@@ -637,10 +654,12 @@ footer {
     /* banner */
     .banner {
         padding: 0.6em 0 !important;
+        flex-direction: column;
     }
 
     .banner img {
-        height: 20vh;
+        width: 100%;
+        height: 100%;
     }
 
     /* mail sec */
