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

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

yellowcat
Tourist
6 0 1

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' -%}
<h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization" {{ block.shopify_attributes }}>
<span class="visually-hidden">{{ shop.name }}</span>
{%- else -%}
<div class="h1 site-header__logo" itemscope itemtype="http://schema.org/Organization" {{ block.shopify_attributes }}>
{%- 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 %}
<a
href="{{ routes.root_url }}"
itemprop="url"
class="site-header__logo-link{% if block.settings.logo-inverted %} logo--has-inverted{% endif %}"
style="padding-top: {{ 100 | divided_by: block.settings.logo.aspect_ratio }}%">

{% 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,
-%}
</a>
{%- if block.settings.logo-inverted -%}
<a
href="{{ routes.root_url }}"
itemprop="url"
class="site-header__logo-link logo--inverted"
style="padding-top: {{ 100 | divided_by: block.settings.logo-inverted.aspect_ratio }}%">

{% 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,
-%}
</a>
{%- endif -%}
{%- else -%}
<a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
{%- endif -%}
{%- if template == 'index' -%}
</h1>
{%- else -%}
</div>
{%- 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' -%}
<h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
{%- else -%}
<div class="h1 site-header__logo" itemscope itemtype="http://schema.org/Organization">
{%- endif -%}
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
{{ shop.name }}
</a>
{%- if template == 'index' -%}
</h1>
{%- else -%}
</div>
{%- endif -%}
{%- endunless -%}

Replies 5 (5)
yellowcat
Tourist
6 0 1

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

yellowcat_0-1692554983646.png

 

yellowcat_1-1692555050355.png

 

 

 

yellowcat
Tourist
6 0 1

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
Shopify Partner
6961 1656 2041

Hi @yellowcat 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
yellowcat
Tourist
6 0 1

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

Made4uo-Ribe
Shopify Partner
6961 1656 2041

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.