Fix carousel mobile

Author: w3bdesign

public/css/app.css

@@ -1849,6 +1849,10 @@ video {
 
 @media (min-width: 768px) {
 
+  .md\:block {
+    display: block;
+  }
+
   .md\:w-full {
     width: 100%;
   }

public/js/app.js

@@ -21358,7 +21358,7 @@ var _hoisted_3 = {
   "class": "p-6"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("footer", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, "Copyright © " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.todayDate) + " Daniel / w3bdesign", 1
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("footer", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, "Copyright © " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.todayDate), 1
   /* TEXT */
   )])]);
 }
@@ -21714,7 +21714,7 @@ var _hoisted_1 = {
   "data-carousel": "static"
 };
 
-var _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)("<div class=\"overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96\"><!-- Item 1 --><div class=\"hidden duration-700 ease-in-out\" data-carousel-item><div class=\"flex items-start justify-center w-full px-6 tracking-wide\"><span class=\"z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4\">MacBook Air 12 In Store now!</span><img src=\"/images/Hero.jpg\" class=\"block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2\" alt=\"...\"></div></div><!-- Item 2 --><div class=\"hidden duration-700 ease-in-out\" data-carousel-item><div class=\"flex items-start justify-center w-full px-6 tracking-wide\"><span class=\"z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4\">MacBook Air 13 In Store now!</span><img src=\"/images/Hero.jpg\" class=\"block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2\" alt=\"...\"></div></div><!-- Item 3 --><div class=\"hidden duration-700 ease-in-out\" data-carousel-item><div class=\"flex items-start justify-center w-full px-6 tracking-wide\"><span class=\"z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4\">MacBook Air 14 In Store now!</span><img src=\"/images/Hero.jpg\" class=\"block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2\" alt=\"...\"></div></div></div>", 1);
+var _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)("<div class=\"overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96\"><!-- Item 1 --><div class=\"hidden duration-700 ease-in-out\" data-carousel-item><div class=\"flex items-start justify-center w-full px-6 tracking-wide\"><span class=\"z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4 hidden md:block\">MacBook Air 12 In Store now!</span><img src=\"/images/Hero.jpg\" class=\"block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2\" alt=\"...\"></div></div><!-- Item 2 --><div class=\"hidden duration-700 ease-in-out\" data-carousel-item><div class=\"flex items-start justify-center w-full px-6 tracking-wide\"><span class=\"z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4 hidden md:block\">MacBook Air 13 In Store now!</span><img src=\"/images/Hero.jpg\" class=\"block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2\" alt=\"...\"></div></div><!-- Item 3 --><div class=\"hidden duration-700 ease-in-out\" data-carousel-item><div class=\"flex items-start justify-center w-full px-6 tracking-wide\"><span class=\"z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4 hidden md:block\">MacBook Air 14 In Store now!</span><img src=\"/images/Hero.jpg\" class=\"block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2\" alt=\"...\"></div></div></div>", 1);
 
 var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
   "class": "flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2"
@@ -24650,7 +24650,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "\r\n/* Style for mobile menu links */\n.linkStyle[data-v-a706a4b0] {\n@apply w-auto p-4 m-4 font-bold text-center border border-gray-300 border-opacity-50 shadow-md rounded;\n}\n.linkStyleCart[data-v-a706a4b0] {\n@apply w-auto p-4 m-4 font-bold text-center;\n}\r\n\r\n/* Main hamburger styling */\n.burger[data-v-a706a4b0] {\r\n  height: 3em;\r\n  width: 3em;\r\n  position: relative;\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  transition: 0.5s all;\r\n  -webkit-tap-highlight-color: transparent;\n}\n.burger .burger-lines[data-v-a706a4b0]::after {\r\n  left: 0;\r\n  top: -1em;\n}\n.burger .burger-lines[data-v-a706a4b0]::before {\r\n  left: 1em;\r\n  top: 1em;\n}\n.burger[data-v-a706a4b0]::after {\r\n  content: \"\";\r\n  display: block;\r\n  position: absolute;\r\n  height: 150%;\r\n  width: 150%;\r\n  top: -25%;\r\n  left: -25%;\n}\n.burger .burger-lines[data-v-a706a4b0] {\r\n  top: 50%;\r\n  margin-top: -0.125em;\n}\n.burger .burger-lines[data-v-a706a4b0],\r\n.burger .burger-lines[data-v-a706a4b0]::after,\r\n.burger .burger-lines[data-v-a706a4b0]::before {\r\n  pointer-events: none;\r\n  display: block;\r\n  content: \"\";\r\n  width: 100%;\r\n  border-radius: 0.25em;\r\n  background-color: #000;\r\n  height: 0.25em;\r\n  position: absolute;\r\n  transform: rotate(0);\n}\r\n\r\n/* Burger animations classes */\n.burger.burger-squeeze .burger-lines[data-v-a706a4b0],\r\n.burger.burger-squeeze .burger-lines[data-v-a706a4b0]::after,\r\n.burger.burger-squeeze .burger-lines[data-v-a706a4b0]::before {\r\n  transition: 0.2s top 0.2s, 0.1s left, 0.2s transform, 0.4s background-color 0.2s;\n}\n.burger.burger-squeeze .burger-lines[data-v-a706a4b0]::after,\r\n.burger.burger-squeeze .burger-lines[data-v-a706a4b0]::before {\r\n  width: 2em;\n}\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0],\r\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::after,\r\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::before {\r\n  transition: 0.2s background-color, 0.2s top, 0.2s left, 0.2s transform 0.15s;\n}\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0] {\r\n  background-color: transparent;\n}\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::before,\r\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::after {\r\n  left: 0.5em;\r\n  top: 0;\n}\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::before {\r\n  transform: rotate(-45deg);\n}\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::after {\r\n  transform: rotate(45deg);\n}\r\n", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, "\r\n/* Main hamburger styling */\n.burger[data-v-a706a4b0] {\r\n  height: 3em;\r\n  width: 3em;\r\n  position: relative;\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  transition: 0.5s all;\r\n  -webkit-tap-highlight-color: transparent;\n}\n.burger .burger-lines[data-v-a706a4b0]::after {\r\n  left: 0;\r\n  top: -1em;\n}\n.burger .burger-lines[data-v-a706a4b0]::before {\r\n  left: 1em;\r\n  top: 1em;\n}\n.burger[data-v-a706a4b0]::after {\r\n  content: \"\";\r\n  display: block;\r\n  position: absolute;\r\n  height: 150%;\r\n  width: 150%;\r\n  top: -25%;\r\n  left: -25%;\n}\n.burger .burger-lines[data-v-a706a4b0] {\r\n  top: 50%;\r\n  margin-top: -0.125em;\n}\n.burger .burger-lines[data-v-a706a4b0],\r\n.burger .burger-lines[data-v-a706a4b0]::after,\r\n.burger .burger-lines[data-v-a706a4b0]::before {\r\n  pointer-events: none;\r\n  display: block;\r\n  content: \"\";\r\n  width: 100%;\r\n  border-radius: 0.25em;\r\n  background-color: #000;\r\n  height: 0.25em;\r\n  position: absolute;\r\n  transform: rotate(0);\n}\r\n\r\n/* Burger animations classes */\n.burger.burger-squeeze .burger-lines[data-v-a706a4b0],\r\n.burger.burger-squeeze .burger-lines[data-v-a706a4b0]::after,\r\n.burger.burger-squeeze .burger-lines[data-v-a706a4b0]::before {\r\n  transition: 0.2s top 0.2s, 0.1s left, 0.2s transform, 0.4s background-color 0.2s;\n}\n.burger.burger-squeeze .burger-lines[data-v-a706a4b0]::after,\r\n.burger.burger-squeeze .burger-lines[data-v-a706a4b0]::before {\r\n  width: 2em;\n}\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0],\r\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::after,\r\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::before {\r\n  transition: 0.2s background-color, 0.2s top, 0.2s left, 0.2s transform 0.15s;\n}\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0] {\r\n  background-color: transparent;\n}\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::before,\r\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::after {\r\n  left: 0.5em;\r\n  top: 0;\n}\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::before {\r\n  transform: rotate(-45deg);\n}\n.burger.burger-squeeze.open .burger-lines[data-v-a706a4b0]::after {\r\n  transform: rotate(45deg);\n}\r\n", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 

resources/js/components/Footer/Footer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container mx-auto mt-12">
     <footer class="px-6 text-center bg-white border border-gray-200 rounded-lg shadow-md">
-      <div class="p-6">Copyright &copy; {{ todayDate }} Daniel / w3bdesign</div>
+      <div class="p-6">Copyright &copy; {{ todayDate }}</div>
     </footer>
   </div>
 </template>

resources/js/components/Header/MobileMenu.vue

@@ -9,10 +9,14 @@
       }"
     >
       <ul class="z-50">
-        <li class="z-50 text-xl w-auto p-4 m-4 font-bold text-center border border-gray-300 border-opacity-50 shadow-md rounded">
+        <li
+          class="z-50 text-xl w-auto p-4 m-4 font-bold text-center border border-gray-300 border-opacity-50 shadow-md rounded"
+        >
           <router-link to="/" @click="displayMobileMenu"> Home </router-link>
         </li>
-        <li class="z-50 text-xl w-auto p-4 m-4 font-bold text-center border border-gray-300 border-opacity-50 shadow-md rounded">
+        <li
+          class="z-50 text-xl w-auto p-4 m-4 font-bold text-center border border-gray-300 border-opacity-50 shadow-md rounded"
+        >
           <router-link to="/products" @click="displayMobileMenu">Products </router-link>
         </li>
         <li class="flex justify-center mt-6 text-lg w-auto p-4 m-4 font-bold text-center">
@@ -66,15 +70,6 @@ export default defineComponent({
 </script>
 
 <style scoped>
-/* Style for mobile menu links */
-.linkStyle {
-  @apply w-auto p-4 m-4 font-bold text-center border border-gray-300 border-opacity-50 shadow-md rounded;
-}
-
-.linkStyleCart {
-  @apply w-auto p-4 m-4 font-bold text-center;
-}
-
 /* Main hamburger styling */
 .burger {
   height: 3em;

resources/js/components/Index/Carousel.vue

@@ -4,9 +4,9 @@
     <div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
       <!-- Item 1 -->
       <div class="hidden duration-700 ease-in-out" data-carousel-item>
-        <div class="flex items-start justify-center w-full px-6 tracking-wide">
+        <div class="flex items-start justify-center w-full px-6 tracking-wide ">
           <span
-            class="z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4"
+            class="z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4 hidden md:block"
             >MacBook Air 12 In Store now!</span
           >
           <img
@@ -20,7 +20,7 @@
       <div class="hidden duration-700 ease-in-out" data-carousel-item>
         <div class="flex items-start justify-center w-full px-6 tracking-wide">
           <span
-            class="z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4"
+            class="z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4 hidden md:block"
             >MacBook Air 13 In Store now!</span
           >
           <img
@@ -34,7 +34,7 @@
       <div class="hidden duration-700 ease-in-out" data-carousel-item>
         <div class="flex items-start justify-center w-full px-6 tracking-wide">
           <span
-            class="z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4"
+            class="z-40 absolute top-1/2 p-4 my-4 text-2xl text-black bg-white rounded-lg mt-4 hidden md:block"
             >MacBook Air 14 In Store now!</span
           >
           <img