Ancho de Scrolling text

Store Design
, ,

Topic summary

Un usuario reporta un problema con un elemento de scrolling text en el tema Mr Parker de Shopify: funciona correctamente en escritorio pero en móvil excede el ancho de la pantalla, manteniendo las dimensiones de escritorio.

Solución implementada:

  • Inicialmente se intentó agregar código CSS personalizado en archivos como base.css/theme.css/style.css, pero estos no existían en la estructura del tema.
  • La solución final consistió en insertar un bloque de CSS con media query directamente en el archivo theme.liquid, justo después de la etiqueta <head>.
  • El código CSS incluye:
    • overflow-x: hidden y width: fit-content para la sección del marquee
    • Restricciones de ancho al 100% para html y body en dispositivos móviles (max-width: 768px)

Estado: El problema fue resuelto exitosamente. El scrolling text ahora se ajusta correctamente al ancho de pantalla en dispositivos móviles.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
6

Hi @Sebastian41 ,

Ve a la tienda en línea, luego a Tema y selecciona Editar código.
Busca el archivo base.css/theme.css/style.css/main.css/custom.css y agrega el código proporcionado al final del archivo.

@media (max-width: 768px){
#shopify-section-template--23767982735651__scrolling_marquee_dWtEDh .scrolling__marquee-section {
    padding: 5px 0;
    overflow-x: hidden !important;
    width: fit-content !important;
}

html,body{
  overflow-x: hidden !important;
  width: 100% !important;
}
}