{"section":"known-issues","requestedLocale":"en","requestedSlug":"carousel-layout-issue-using-responsivevalues-in-sku-selector","locale":"en","slug":"carousel-layout-issue-using-responsivevalues-in-sku-selector","path":"docs/en/known-issues/Store Framework/carousel-layout-issue-using-responsivevalues-in-sku-selector.md","branch":"main","content":"## Summary\n\n\nSKU Selector width value breaks when `displayMode=\"slider\"` is used for unavailable products and `sliderItemsPerPage` is configured using `min-width` values.\n\n\n#### Simulation\n\n\n\n\n1.\n\nInstall the vtex.responsive-values app in the workspace, or configure a responsive-values block in your theme to provide values based on min-width breakpoints.\n\n\n\n2.\n\nConfigure the sliderItemsPerPage prop of the SKU Selector using the responsive-values pattern:\n\nThis configuration uses min-width breakpoints and is based on the responsive-values app, which is not officially supported by the SKU Selector.\n\n\n\n3.\n\nDeploy this configuration to a product detail page (PDP) that has no available SKUs (i.e., all SKUs are out of stock).\n\n\n\n4.\n\nAccess the PDP in the workspace and confirm that the SKU Selector renders in displayMode=\"slider\".\n\n\n\n5. Observe the result: the SKU carousel will break — items will have incorrect widths, often overflowing or not rendering as expected.\n\n\n#### Workaround\n\n\nReplace the `sliderItemsPerPage` configuration using `min-width` keys with the expected format using the standard `desktop`, `tablet`, and `mobile` keys."}