Blocks: Improve box carousel layout on mobile (size + spacing)

[LuckynaSan]

Bug Description

On the Mobile view of the Stories Box Carousel Layout, there is no spacing between Stories. Additionally, the size of the Stories could be improved/decreased as it is displaying large.

Expected Behaviour

There should be more space between the Stories when viewing it on mobile devices and the size of the display should be smaller.

Steps to Reproduce

1. Add new web stories block
2. Select latest stories
3. Select Box Carousel Layout Style
4. Set the Number of Stories in the carousel to display more than 2
5. Publish Post
6. View on Mobile Device
7. Note the space between Web Stories

Screenshots

Additional Context

Temporary Test Website to View Layout on Mobile: https://ownvolcano.s3-tastewp.com/2024/02/19/test-mobile-view-box-carousel/

Related Support Topic: https://wordpress.org/support/topic/horizontal-scroll-template-is-too-large/

• Plugin Version: 1.35.0
• WordPress Version: 6.4.3
• Operating System: iOS iphone 15
• Browser:Safari

[Swanand01]

Hi @swissspidy

I looked into the issue and have come up with a couple of approaches to fix it:

Approach 1:

CSS applied:

@media all and (max-width: 676px) {
  .carousel>.glider-track>.web-stories-list__story>.web-stories-list__story-poster {
    max-height: 342px !important;
    aspect-ratio: unset;
  }
}

Video:

https://github.com/GoogleForCreators/web-stories-wp/assets/75439077/8d3174c5-1d3e-4bae-b146-eadb2ec05f72

Approach 2:

CSS applied:

@media all and (max-width: 676px) {
  .carousel>.glider-track{
    width: 100% !important;
  }
}

Video:

https://github.com/GoogleForCreators/web-stories-wp/assets/75439077/1041e4db-5c5a-44d1-8712-fcc0e6895186

Minor bug in Approach 2: The right arrow does not disappear on scrolling all the way to the right.

WDYT?

[Swanand01]

As seen in both the approaches above, margin has been added between the stories.

CSS applied:

@media all and (max-width: 676px) {
  .carousel>.glider-track>.web-stories-list__story {
    margin: 0 10px;
  }
}

[swissspidy]

Approach 1 is not desired. We want to always maintain the existing aspect ratio for stories, not turn them into squares.

So number (2) looks better.

Any reason/explanation for the right arrow not disappearing? Not a huge deal, but wonder if we could address this too.

Aside: In the existing code base, we use @media all and (min-width: 676px) in some places. @media all and (max-width: 676px) contradicts/overlaps that, so it would need to be @media all and (max-width: 675px) (1px less).

The margin looks good 👍