How can I fix the blurry logo on Impulse theme 7.4.0?

[yellowcat]

Hi there!

Does anyone have a solution for the blurry logo Impulse theme 7.4.0? I tried every possible solution mentioned here… My code is either different or there is no change. Large PNG file is my log, very sharp when opened separately.
https://adventuredogsco.com/

Here is my header block liquid file. Thank you in advance!

{%- for block in section.blocks -%}
{%- if block.type == ‘logo’ -%}
{%- liquid
assign has_logo = true
-%}

{%- style -%}
.header-item–logo,
.header-layout–left-center .header-item–logo,
.header-layout–left-center .header-item–icons {
-webkit-box-flex: 0 1 {{ block.settings.mobile_logo_width }}px;
-ms-flex: 0 1 {{ block.settings.mobile_logo_width }}px;
flex: 0 1 {{ block.settings.mobile_logo_width }}px;
}

@media only screen and (min-width: 769px) {
.header-item–logo,
.header-layout–left-center .header-item–logo,
.header-layout–left-center .header-item–icons {
-webkit-box-flex: 0 0 {{ block.settings.desktop_logo_width }}px;
-ms-flex: 0 0 {{ block.settings.desktop_logo_width }}px;
flex: 0 0 {{ block.settings.desktop_logo_width }}px;
}
}

.site-header__logo a {
width: {{ block.settings.mobile_logo_width }}px;
}
.is-light .site-header__logo .logo–inverted {
width: {{ block.settings.mobile_logo_width }}px;
}
@media only screen and (min-width: 769px) {
.site-header__logo a {
width: {{ block.settings.desktop_logo_width }}px;
}

.is-light .site-header__logo .logo–inverted {
width: {{ block.settings.desktop_logo_width }}px;
}
}
{%- endstyle -%}

{%- if template == ‘index’ -%}

{{ shop.name }} {%- else -%}

{%- endif -%}

{%- if block.settings.logo -%}
{% comment %}
.logo–has-inverted is only applied to the default logo if the inverted logo exists. That way it’ll only be hidden on the slider when it has a backup.
{% endcomment %}

{% comment %} Desktop logo {% endcomment %}
{%- assign width = block.settings.desktop_logo_width | times: 2 -%}

{%- assign height = block.settings.desktop_logo_width | divided_by: block.settings.logo.aspect_ratio -%}
{%- capture sizes -%}{{ block.settings.desktop_logo_width }}px{%- endcapture -%}
{%- capture widths -%}{{ block.settings.desktop_logo_width }}, {{ block.settings.desktop_logo_width | times: 2 }}{%- endcapture -%}
{%- capture style -%}max-height: {{ block.settings.desktop_logo_width | divided_by: block.settings.logo.aspect_ratio }}px;max-width: {{ block.settings.desktop_logo_width }}px;{%- endcapture -%}

{% comment %} Mobile logo {% endcomment %}
{%- assign mobile_width = block.settings.mobile_logo_width | times: 2 -%}
{%- assign mobile_height = block.settings.mobile_logo_width | divided_by: block.settings.logo.aspect_ratio -%}
{%- capture mobile_sizes -%}{{ block.settings.mobile_logo_width }}px{%- endcapture -%}
{%- capture mobile_widths -%}{{ block.settings.mobile_logo_width }}, {{ block.settings.mobile_logo_width | times: 2 }}{%- endcapture -%}
{%- capture mobile_style -%}max-height: {{ block.settings.mobile_logo_width | divided_by: block.settings.logo.aspect_ratio }}px;max-width: {{ block.settings.mobile_logo_width }}px;{%- endcapture -%}

{%- render ‘image-element’,
img: block.settings.logo,
img_width: width,
img_height: height,
img_tag_width: block.settings.desktop_logo_width,
sizes: sizes,
widths: widths,
style: style,
classes: ‘small–hide’,
loading: ‘eager’,
alt: block.settings.logo.alt | default: shop.name,
itemprop: ‘logo’,
-%}
{%- render ‘image-element’,
img: block.settings.logo,
img_width: mobile_width,
img_height: mobile_height,
img_tag_width: block.settings.mobile_logo_width,
sizes: mobile_sizes,
widths: mobile_widths,
style: mobile_style,
classes: ‘medium-up–hide’,
loading: ‘eager’,
alt: block.settings.logo.alt | default: shop.name,
-%}

{%- if block.settings.logo-inverted -%}

{% comment %} Desktop logo {% endcomment %}
{%- assign width = block.settings.desktop_logo_width | times: 2 -%}
{%- assign height = block.settings.desktop_logo_width | divided_by: block.settings.logo-inverted.aspect_ratio -%}
{%- capture sizes -%}{{ block.settings.desktop_logo_width }}px{%- endcapture -%}
{%- capture widths -%}{{ block.settings.desktop_logo_width }}, {{ block.settings.desktop_logo_width | times: 2 }}{%- endcapture -%}
{%- capture style -%}max-height: {{ block.settings.desktop_logo_width | divided_by: block.settings.logo-inverted.aspect_ratio }}px;max-width: {{ block.settings.desktop_logo_width }}px;{%- endcapture -%}

{% comment %} Mobile logo {% endcomment %}
{%- assign mobile_width = block.settings.mobile_logo_width | times: 2 -%}
{%- assign mobile_height = block.settings.mobile_logo_width | divided_by: block.settings.logo-inverted.aspect_ratio -%}
{%- capture mobile_sizes -%}{{ block.settings.mobile_logo_width }}px{%- endcapture -%}
{%- capture mobile_widths -%}{{ block.settings.mobile_logo_width }}, {{ block.settings.mobile_logo_width | times: 2 }}{%- endcapture -%}
{%- capture mobile_style -%}max-height: {{ block.settings.mobile_logo_width | divided_by: block.settings.logo-inverted.aspect_ratio }}px;max-width: {{ block.settings.mobile_logo_width }}px;{%- endcapture -%}

{%- render ‘image-element’,
img: block.settings.logo-inverted,
img_width: width,
img_height: height,
img_tag_width: block.settings.desktop_logo_width,
sizes: sizes,
widths: widths,
style: style,
classes: ‘small–hide’,
loading: ‘eager’,
alt: block.settings.logo-inverted.alt | default: shop.name,
itemprop: ‘logo’,
-%}
{%- render ‘image-element’,
img: block.settings.logo-inverted,
img_width: mobile_width,
img_height: mobile_height,
img_tag_width: block.settings.mobile_logo_width,
sizes: mobile_sizes,
widths: mobile_widths,
style: mobile_style,
classes: ‘medium-up–hide’,
loading: ‘eager’,
alt: block.settings.logo-inverted.alt | default: shop.name,
-%}

{%- endif -%}
{%- else -%}
{{ shop.name }}
{%- endif -%}
{%- if template == ‘index’ -%}

{%- else -%} {%- endif -%}

{%- endif -%}
{%- endfor -%}

{%- unless has_logo -%}
{%- style -%}
/* prevent text-only logo from breaking mobile nav */
.header-item–logo {
max-width: 60%;
}
{%- endstyle -%}
{%- if template == ‘index’ -%}

{%- else -%}

{%- endif -%} {{ shop.name }} {%- if template == 'index' -%}

{%- else -%} {%- endif -%} {%- endunless -%}

[yellowcat]

Thank you for getting back to me, here is what I mean. The original image is sharp.

[yellowcat]

The screenshot is from 350 image from the desktop, not 110. 110 is the setting for mobile.

I’ve included the code ibn my question, is it not visible? Thank you!

[Made4uo-Ribe]

Hi @yellowcat

Can I take a look? Would you mind to share the website that have a blurry logo? Thanks!

[yellowcat]

That would be great! https://adventuredogsco.com/ thanks!

[Made4uo-Ribe]

Thank you for the information. Which logo? Seems like good to me. You can share the preview if its on going maintenance. Thanks!