{"section":"known-issues","requestedLocale":"pt","requestedSlug":"problema-de-layout-de-carrossel-usando-valores-responsivos-no-seletor-de-sku","locale":"pt","slug":"problema-de-layout-de-carrossel-usando-valores-responsivos-no-seletor-de-sku","path":"docs/pt/known-issues/Store Framework/problema-de-layout-de-carrossel-usando-valores-responsivos-no-seletor-de-sku.md","branch":"main","content":">ℹ️ Este problema conhecido foi traduzido automaticamente do inglês.\n\n## Sumário\n\n\nO valor da largura do seletor de SKU é quebrado quando `displayMode=\"slider\"` é usado para produtos indisponíveis e `sliderItemsPerPage` é configurado usando valores `min-width`.\r\n## Simulação\n\n\n\n\n1.\n\nInstale o aplicativo vtex.responsive-values no espaço de trabalho ou configure um bloco responsive-values em seu tema para fornecer valores com base em pontos de interrupção de largura mínima.\n\n\n\n2.\n\nConfigure a propriedade sliderItemsPerPage do seletor de SKU usando o padrão responsive-values:\n\nEssa configuração usa pontos de interrupção de largura mínima e é baseada no aplicativo responsive-values, que não é oficialmente compatível com o seletor de SKU.\n\n\n\n3.\n\nImplemente essa configuração em uma página de detalhes do produto (PDP) que não tenha SKUs disponíveis (ou seja, todas as SKUs estão fora de estoque).\n\n\n\n4.\n\nAcesse o PDP no espaço de trabalho e confirme que o seletor de SKU é renderizado em displayMode=\"slider\".\n\n\n\n5. Observe o resultado: o carrossel de SKUs quebrará - os itens terão larguras incorretas, muitas vezes transbordando ou não sendo renderizados como esperado\r\n## Workaround\n\n\nSubstitua a configuração `sliderItemsPerPage` usando as chaves `min-width` pelo formato esperado usando as chaves padrão `desktop`, `tablet` e `mobile`."}