Cambiar tamaño de cuadro en large image with text

Store Design
, , , ,

Topic summary

Un usuario busca reducir el tamaño del cuadro blanco que contiene texto en la sección “large image with text” de su tienda Shopify, específicamente para la vista móvil, ya que considera que es demasiado grande.

Soluciones propuestas:

Dos expertos ofrecieron soluciones similares mediante CSS personalizado:

  • Método: Acceder a Online Stores > Themes > Edit code, luego editar el archivo base.css, theme.css o global.css
  • Código sugerido: Agregar márgenes (margin-left y margin-right) a las clases .background-media-text__inner y .background-media-text__aligner
  • Los valores recomendados varían entre 20px y 28px 12px 11px, ajustables según preferencia
  • Una respuesta incluye media query específica para pantallas con ancho máximo de 576px

Estado: El problema permanece sin confirmación de resolución por parte del usuario original. Ambas soluciones incluyen capturas de pantalla de ejemplo.

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

Screenshot_20240430_172937_Chrome.jpg
Screenshot_20240430_172937_Chrome.jpg720×1600 146 KB

buena noche, quiero ayuda para cambiar el tamaño del cuadro blanco que contiene el texto para mobile, ya que como ven es muy grande para mi gusto.

https://www.epkpanama.com/

quedo atenta, gracias

2

Hello @Epkpanama

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

/* You can change the value of 20px to the value you want */
.background-media-text__inner .background-media-text__aligner  {
   margin-left: 20px !important;
   margin-right: 20px !important;
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

3

Hi @Epkpanama

Please follow the instructions below:
Step 1: Shopify Admin → Online Store → Edit Code:

Step 2: Choose file the base.css or theme.css or theme.css.liquid or global.css

Step 3: Insert this CSS snippet into your CSS file:

@media only screen and (max-width: 576px) {
  .background-media-text__inner .background-media-text__aligner {
    margin: 11px 28px 12px !important;
  }
}

Here is the result:

image.png
image.png1920×779 193 KB

Hope it can help you.

1 Like