diff --git a/frontend/packages/volto-light-theme/news/+fixsimpleSlider.bugfix b/frontend/packages/volto-light-theme/news/+fixsimpleSlider.bugfix new file mode 100644 index 000000000..65305fcbd --- /dev/null +++ b/frontend/packages/volto-light-theme/news/+fixsimpleSlider.bugfix @@ -0,0 +1 @@ +Fix the changing width layout induced by simple slider variant @Tishasoumya-02 \ No newline at end of file diff --git a/frontend/packages/volto-light-theme/src/theme/blocks/_slider.scss b/frontend/packages/volto-light-theme/src/theme/blocks/_slider.scss index 60669c869..ac0a02dfe 100644 --- a/frontend/packages/volto-light-theme/src/theme/blocks/_slider.scss +++ b/frontend/packages/volto-light-theme/src/theme/blocks/_slider.scss @@ -129,38 +129,62 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9); &.simple { .slider-viewport { margin-bottom: 0; - @media only screen and (max-width: $computer-width) { - margin-bottom: $spacing-medium; - } + container-name: slider; + container-type: inline-size; } .teaser-item { display: grid; + min-width: 0; align-items: center; padding: 0 130px; aspect-ratio: 2/1; background-color: var(--theme-color); - gap: clamp(30px, 4vw, 60px); + gap: clamp(30px, 4vw, 57px); grid-template-areas: 'images content'; grid-template-rows: auto; + + @media only screen and (min-width: $large-monitor-width) { + align-content: center; + } + @media only screen and (max-width: $computer-width) { - display: flex; + display: inline-block; padding: 0 0; aspect-ratio: auto; - gap: 0; } &.has--slider--flagAlign--right { grid-template-areas: 'content images'; - grid-template-columns: clamp(300px, 40vw, 600px) auto; + grid-template-columns: minmax(0, clamp(300px, 40vw, 600px)) minmax( + 0, + 1fr + ); } &.has--slider--flagAlign--left { grid-template-areas: 'images content'; - grid-template-columns: auto clamp(300px, 40vw, 600px); + grid-template-columns: minmax(0, 1fr) minmax( + 0, + clamp(300px, 40vw, 600px) + ); + } + + @container slider (max-width: #{$layout-container-width}) { + #page-edit &, + #page-add & { + &.has--slider--flagAlign--right { + grid-template-columns: minmax(0, 60%) minmax(0, 40%); + } + &.has--slider--flagAlign--left { + grid-template-columns: minmax(0, 40%) minmax(0, 60%); + } + } } .highlight-image-wrapper { grid-area: images; - + @media only screen and (min-width: $large-monitor-width) { + align-self: start; + } img { aspect-ratio: var( --image-aspect-ratio, @@ -183,6 +207,13 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9); grid-area: content; transform: none; + @media only screen and (min-width: $large-monitor-width) { + align-content: start; + .supertitle { + margin-top: 0; + } + } + @media only screen and (max-width: $computer-width) { height: 100%; align-content: start; @@ -207,8 +238,8 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9); } p { color: var(--theme-foreground-color); - -webkit-line-clamp: 10; - line-clamp: 10; + -webkit-line-clamp: 3; + line-clamp: 3; } } .slider-description {