[FIX] website: fix small layout issues in carousel on mobile

-Remove arrows on mobile because it's too big and hide the content.
 User will use the touch screen to make the carousel move.
-Bordered style: Reduce the borders on mobile.

Part of #55857

task-2318526

1 files changed, 9 insertions, 0 deletions

diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 9f79e9565b4..ce8524014d7 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -474,6 +474,12 @@ table.table_desc tr td {
         width: 8%;
         opacity: 1;
     }
+    @include media-breakpoint-down(sm) {
+        .carousel-control-prev,
+        .carousel-control-next {
+            display: none; // remove arrows on mobile
+        }
+    }
     .carousel-control-prev { justify-content: flex-start; }
     .carousel-control-next { justify-content: flex-end; }
     .carousel-control-prev-icon,
@@ -529,6 +535,9 @@ table.table_desc tr td {
     // Border
     &.s_carousel_bordered {
         border: 2rem solid rgba(0,0,0,0);
+        @include media-breakpoint-down(sm) {
+            border: 0.5rem solid rgba(0,0,0,0);
+        }
         // Controls - caret
         .carousel-control-prev-icon:before { content: "\f0d9"; }
         .carousel-control-next-icon:before { content: "\f0da"; }