How to change logo size in booster theme

[Xavijavc]

Hola buenos días, estoy configurando mi tienda shopify, tengo el tema booster, cuando configuro el tamaño del logo para escritorio se ve muy bien pero no es lo mismo con la versión móvil porque el logo se ve demasiado grande. ¿Puedes ayudarme, por favor?

Se adjuntan las imágenes de escritorio y móvil.

Como podéis ver para la versión de escritorio se ve muy bien pero para la móvil es muy grande.

[AlfredoMendoza]

Hola @Xavijavc 

El error que presentas parece ser tema de una configuración de estilos. Puedes intentar lo siguiente:

• Revisa dentro de las opciones de personalización si viene alguna opción para poder limitar el tamaño del logo en la vista móvil.
• Revisa si dentro de la configuración te recomienda subir una imagen con ciertas medidas para el logo de la vista móvil. Si es así, te recomiendo que sigas la recomendación y subas una imagen en las medidas sugeridas en el tema.

Si ya confirmaste las opciones anteriores y no se puede ajustar el tamaño, lo más probable es que se necesite editar el código de tu tema, pero hacer esto requiere conocimientos en creación y edición de temas Shopify. Así como conocimientos en CSS. Teniendo eso en cuenta los pasos generales para solucionarlo serían:

• Identifica los estilos CSS que se aplican al logo en versión móvil.
• Identifica en que hoja de estilos de tu tema se encuentran
• Entra al editor de código de temas de Shopify y ajusta los estilos CSS en la hoja de estilos correspondiente.
• Guarda los cambios y revisa en la versión móvil.

Ojo: es importante que esto último lo hagas solo si te sientes seguro, ya que hacerlo mal puede llevar a romper toda la estructura de tu tema.

Si necesitas más ayuda por favor envíame un mensaje privado.

Espero mi respuesta te sea de ayuda. Saludos.

[Xavijavc]

Hello I was checking and if you have the option for logo size but only for desktop does not have the option for mobile, I've tried setting the code with a CSS file but has no effect on the theme
this is the code that comes by default in the theme for the logo

{% assign logoStyle = '' %}
{% if settings.defaultLogo != nil %}
{% capture defaultLogo %}<img loading="lazy" height="{{settings.defaultLogo.height}}" width="{{settings.defaultLogo.width}}" src="{{settings.defaultLogo | img_url: '256x'}}" alt="logo" class="lazyload logo--default">{% endcapture %}
{% assign logoStyle = logoStyle | append: ' logo--default-available' %}
{% endif %}

{% if settings.mobileLogo != nil %}
{% capture mobileLogo %}<img loading="lazy" height="{{settings.mobileLogo.height}}" width="{{settings.mobileLogo.width}}" src="{{settings.mobileLogo | img_url: '256x'}}" alt="logo" class="hide-desktop lazyload logo--mobile">{% endcapture %}
{% assign logoStyle = logoStyle | append: ' logo--mobile-available' %}
{% endif %}

{% if settings.transparentLogo != nil %}
{% capture transparentLogo %}<img loading="lazy" height="{{settings.transparentLogo.height}}" width="{{settings.transparentLogo.width}}" src="{{settings.transparentLogo | img_url: '256x'}}" alt="logo" class="lazyload logo--transparent">{% endcapture %}
{% assign logoStyle = logoStyle | append: ' logo--transparent-available' %}
{% endif %}

{% if logoStyle != '' %}
<a href="{{ routes.root_url }}" class="logo-img {{logoStyle}}">
{{defaultLogo}}
{{mobileLogo}}
{{transparentLogo}}
</a>
{% elsif settings.textLogo != blank %}
<a href="{{ routes.root_url }}" class="logo-text">{{settings.textLogo}}</a>
{% else %}
<a href="{{ routes.root_url }}" class="logo-text">{{shop.name}}</a>
{% endif %}

[AlfredoMendoza]

Hola @Xavijavc 

Por lo que veo en el código que compartiste en la sección del logo de la vista móvil. si tiene una configuración para el ancho y el largo del logo, estás son las propiedades:

• {{settings.mobileLogo.height}}
• {{settings.mobileLogo.width}}

Lo anterior indica que si existe una configuración para poder indicar las medidas del logo en la vista móvil. Lo más probable es que tengan un valor por defecto. Hay 2 soluciones:

1. Dentro de archivo donde sacaste el código anterior, busca mobileLogo. Busca entre todas las opciones que coincidan y tiene que haber alguna donde le asigna un valor a la altura y al ancho. Tendrás que editarlo para darle las medidas correctas.
2. En el fragmento encargado de mostrar el logo de mobil hay que borrar estas 2 opciones
   1. height="{{settings.mobileLogo.height}}"
   2. width="{{settings.mobileLogo.width}}"

La segunda opción haría que los estilos CSS que colocaste puedan funcionar para poder darle el alto y ancho que deseas.

Te aconsejo que puedas revisar como funcionan los pesos de los selectores CSS para que puedas tener un panorama de porque tus estilos no se aplicaban al logo móvil.

Si aun continuas con problemas enviame un mensaje privado.

Espero si respuesta te sea de ayuda. Saludos.

[Xavijavc]

Hello, this is the code but it does not appear where to modify the size.

{% if settings.mobileLogo != nil %}
{% capture mobileLogo %}<img loading="lazy" height="{{settings.mobileLogo.height}}" width="{{settings.mobileLogo.width}}" src="{{settings.mobileLogo | img_url: '256x'}}" alt="logo" class="hide-desktop lazyload logo--mobile">{% endcapture %}
{% assign logoStyle = logoStyle | append: ' logo--mobile-available' %}
{% endif %}