How can I improve my mobile logo quality on the Narrative Theme?

Hey,

I’m at the start of my Shop & currently there is only a temporary site onlie. I’m using the Narrative Theme. However when i insert my logo in the header (I’ve tried at least 10 versions variating in size and quality level) the quality is disgusting on mobile devices. (The current Logo is a PNG with the size: 600 x 167 px)

Is there any way to change this?

Link to my shop: https://calisao.com

Best regards
Tobii

@Tobii

sorry for that issue bt your store passwords protect

Hello,

thanks for answering but as i mentioned it is all about the password page at the moment!

Best regards
Tobii

@Tobii

yes, can you please upload bigger size image logo now to smaller

As I already mentioned, I’ve tried many different sizes and resolutions & the problem stays the same! I think I need to adjust the image compression level! Is there a way to do this?

@Tobii

can you please remove unnecessary blank spacing in logo image

I have already done that.

@Tobii

thanks bt i can see black spacing in logo images

Okay, so now the Logo is cut off and the quality is worse on mobile,… I’m struggling really bad :s
Thank you for your advice up to now!

@Tobii

can you please sent password page code?

where can i find the full code of this page?

@Tobii

edit code >>> template >>> password >>

also go to section >>> password header

Thank you,

Password.liquid:

{% layout ‘password’ %}

{% comment %}
The contents of the password.liquid templates can be found in /sections
{% endcomment %}

{% section ‘password-header’ %}
{% section ‘password-content’ %}
{% section ‘password-footer’ %}

password-header.liquid:

{% if section.settings.logo %} {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %} {{ section.settings.logo.alt | default: shop.name }} {% else %}

{{ shop.name }}

{% endif %}

{% schema %}
{
“name”: {
“cs”: “Záhlaví”,
“da”: “Overskrift”,
“de”: “Titel”,
“en”: “Header”,
“es”: “Encabezado”,
“fi”: “Ylätunniste”,
“fr”: “En-tête”,
“it”: “Header”,
“ja”: “ヘッダー”,
“ko”: “헤더”,
“nb”: “Header”,
“nl”: “Koptekst”,
“pl”: “Nagłówek”,
“pt-BR”: “Cabeçalho”,
“pt-PT”: “Cabeçalho”,
“sv”: “Rubrik”,
“th”: “ส่วนหัว”,
“tr”: “Üstbilgi”,
“vi”: “Đầu trang”,
“zh-CN”: “标头”,
“zh-TW”: “標頭”
},
“settings”: [
{
“type”: “image_picker”,
“id”: “logo”,
“label”: {
“cs”: “Obrázek loga”,
“da”: “Logobillede”,
“de”: “Logo-Foto”,
“en”: “Logo image”,
“es”: “Logo”,
“fi”: “Logokuva”,
“fr”: “Image du logo”,
“it”: “Immagine del logo”,
“ja”: “ロゴ画像”,
“ko”: “로고 이미지”,
“nb”: “Logobilde”,
“nl”: “Afbeelding van logo”,
“pl”: “Obraz logo”,
“pt-BR”: “Imagem do logo”,
“pt-PT”: “Imagem do logótipo”,
“sv”: “Logobild”,
“th”: “รูปภาพโลโก้”,
“tr”: “Logo görseli”,
“vi”: “Hình ảnh logo”,
“zh-CN”: “logo 图片”,
“zh-TW”: “標誌圖片”
}
},
{
“type”: “text”,
“id”: “logo_max_width”,
“label”: {
“cs”: “Šířka vlastního loga (v pixelech)”,
“da”: “Tilpasset logobredde (i pixels)”,
“de”: “Benutzerdefinierte Logobreite (Pixel)”,
“en”: “Custom logo width (in pixels)”,
“es”: “Ancho del logo personalizado (en píxeles)”,
“fi”: “Mukautettu logon leveys (pikseleinä)”,
“fr”: “Largeur personnalisée du logo (en pixels)”,
“it”: “Larghezza logo personalizzato (in pixel)”,
“ja”: “ロゴの幅をカスタマイズする (ピクセル単位)”,
“ko”: “사용자 지정 로고 폭 (픽셀)”,
“nb”: “Tilpasset logobredde (i piksler)”,
“nl”: “Aangepaste logobreedte (in pixels)”,
“pl”: “Niestandardowa szerokość logo (w pikselach)”,
“pt-BR”: “Largura do logo personalizado (em pixels)”,
“pt-PT”: “Largura de logótipo personalizada (em píxeis)”,
“sv”: “Anpassad logotypbredd (i pixlar)”,
“th”: “ความกว้างของโลโก้แบบกำหนดเอง (เป็นพิกเซล)”,
“tr”: “Özel logo genişliği (piksel)”,
“vi”: “Chiều rộng logo tùy chỉnh (pixel)”,
“zh-CN”: “自定义 logo 宽度(像素)”,
“zh-TW”: “自訂標誌寬度 (單位為像素)”
},
“default”: {
“cs”: “100”,
“da”: “100”,
“de”: “100”,
“en”: “100”,
“es”: “100”,
“fi”: “100”,
“fr”: “100”,
“it”: “100”,
“ja”: “100”,
“ko”: “100”,
“nb”: “100”,
“nl”: “100”,
“pl”: “100”,
“pt-BR”: “100”,
“pt-PT”: “100”,
“sv”: “100 %”,
“th”: “100”,
“tr”: “100”,
“vi”: “100”,
“zh-CN”: “100”,
“zh-TW”: “100”
}
}
]
}
{% endschema %}