Confusing width breaking container on mobile

Thank you.

For any display issues with any frontend modules, the only way to judge/ debug better is to switch to core themes. However specific for D10, since Olivero is too advanced in CSS which may in turn pose advanced problems for mere mortal, the simplest core theme like Bartik, now contrib, is your best bet.

Try switching to Bartik, and let me know?

If persists, it might be a bug, and so more details are required.
If Bartik says good, it must be your theme.

Then, 3 possibilities I can think of for now:

• Problematic, if not useless, usage of display:grid and its grid-template-rows: max-content rules. Useless when you defined it but not really added any sound values, but problems, like seen at core Olivero here:
  https://git.drupalcode.org/project/drupal/-/blob/10.3.1/core/themes/oliv...
  This caused excessive width like OP for Slick + Views + Olivero, which was fixed here:
  https://git.drupalcode.org/project/slick/-/commit/d637d251c63dc59c8139b6...
  https://git.drupalcode.org/project/slick/-/blob/3.0.2/css/theme/slick.th...

  Try older Slick with Olivero + Views, and with or without nested grid elements to reproduce it.

• Careless use of min-width. max-width overrides width, and min-width overrides max-width. min-width is useful for inline, fixed, absolute or float elements, but not so much for plain block ones unless any good reason for that. That may explain why you failed with max-width. Remove or adjust that min-width or width somewhere.
• Improper, if not incorrect, use of vw and vh units. More relevant for edge to edge element in the viewport, not regular embedded elements.
• Etc., if any.

Try checking the ancestor CSS rules of your problem element one at a time by pressing F12.

That fixed it! It was the first one.

In Drupal 10.3, the Olivero theme applies 'display: grid' by default to both .view and .view-content - so to counter this you have to apply 'display: block' to the views you don't want to use grid.

For this case, I applied the following, targeting the specific view's name to override.

.view-seasonal, .view-seasonal .view-content {
    display: block;
}

This will be an issue for anyone using Splide in 10.3 on with Olivero as the base front-end theme. Perhaps it would be best to add in the 'display: block' by default to views set to use the Splide display.

This should do. If still an issue, just add more specificity like #3.

Thank you.

Automatically closed - issue fixed for 2 weeks with no activity.