My logo is blurry on Desktop (Chrome/FireFox/Edge; Windows 10; 27" monitor) but not on mobile or on 2021 MacBook Air (Safari and Chrome both).
Original file is proper size, rendered and exported properly. Something in the code? Or perhaps with my PC?
Code from header.liquid:
{%- liquid
assign search_t = 'layout.header.search' | t
assign account_icon = section.settings.account-icon
assign search_icon = section.settings.search-icon
assign cart_icon = section.settings.cart-icon
assign logo_image = section.settings.logo
assign logo_height = section.settings.logo-height
assign fix_enabled = section.settings.fix-enabled
assign fixed_logo_height = section.settings.fixed-logo-height
assign logo_position = section.settings.logo-position
assign menu = section.settings.menu
assign show_account = section.settings.header-account-show
assign locale_enabled = false
assign region_enabled = false
if section.settings.show-region-selector and localization.available_countries.size > 1
assign region_enabled = true
endif
if section.settings.show-locale-selector and localization.available_languages.size > 1
assign locale_enabled = true
endif
capture logo_html
render 'logo', logo: logo_image, height: logo_height, mobile_height: fixed_logo_height
endcapture
capture search_html
if search_icon == 'icon'
render 'icons', icon: 'search'
elsif search_icon == 'text'
echo search_t
endif
endcapture
capture cart_html
render 'header-cart', cart_icon: cart_icon
endcapture
-%}
{% capture menu_icon_html %}
{% render 'icons', icon: 'menu' %}
{% endcapture %}
{% capture x_menu_html %}
{%
render 'x-menu',
overlap_parent: 2,
handle: menu,
use_external_icon: true
%}
{% endcapture %}
{% if logo_image %}
{% capture fixed_logo_dimensions = fixed_logo_height %}
max-height: {{ fixed_logo_height }}px;
max-width: {{ fixed_logo_height | times: logo_image.aspect_ratio }}px;
{% endcapture %}
{% endif %}
{% if fix_enabled %}
{% endif %}
{% schema %}
{
"name": "Header",
"class": "section--header",
"settings": [
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "Image",
"info": "1600 x 200px max"
},
{
"label": "Position",
"id": "logo-position",
"type": "select",
"options": [
{ "label": "Above menu", "value": "above" },
{ "label": "Left", "value": "left" },
{ "label": "Center", "value": "center" }
],
"default": "left",
"info": "Position may change on smaller screens or when menu is overlapping"
},
{
"label": "Image height",
"id": "logo-height",
"type": "range",
"min": 15,
"max": 100,
"step": 5,
"default": 50,
"info": "This is referring to the natural height and should be half the height of the image you uploaded to ensure it stays sharp on retina screens."
},
{
"type": "header",
"content": "Sticky and mobile header"
},
{
"label": "Stick to top of screen when scrolling",
"id": "fix-enabled",
"type": "checkbox",
"default": true,
"info": "Disabled in theme editor when inspector enabled."
},
{
"label": "Image height",
"id": "fixed-logo-height",
"type": "range",
"min": 10,
"max": 50,
"step": 5,
"default": 20
},
{
"type": "header",
"content": "Menu"
},
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"default": "main-menu"
},
{
"type": "header",
"content": "Links"
},
{
"type": "checkbox",
"id": "header-account-show",
"label": "Enable customer account links",
"default": true,
"info": "[You will also need to enable customer accounts in your store settings](https:\/\/docs.shopify.com\/manual\/your-store\/customers\/customer-accounts)"
},
{
"type": "select",
"id": "account-icon",
"label": "Account button",
"options": [
{ "label": "Icon", "value": "icon" },
{ "label": "Text", "value": "text" }
],
"default": "text"
},
{
"type": "select",
"id": "search-icon",
"label": "Search button",
"options": [
{ "label": "Icon", "value": "icon" },
{ "label": "Text", "value": "text" }
],
"default": "text"
},
{
"type": "select",
"id": "cart-icon",
"label": "Cart button",
"options": [
{ "label": "Text", "value": "text" },
{ "label": "Bag", "value": "bag" },
{ "label": "Cart", "value": "cart" }
],
"default": "text"
},
{
"type": "header",
"content": "Country/region Selector",
"info": "To add a country/region, go to your [payment settings](/admin/settings/payments)."
},
{
"type": "checkbox",
"id": "show-region-selector",
"label": "Show country/region selector",
"default": true
},
{
"type": "header",
"content": "Language Selector",
"info": "To add a language, go to your [language settings](/admin/settings/languages)."
},
{
"type": "checkbox",
"id": "show-locale-selector",
"label": "Show language selector",
"default": true
}
]
}
{% endschema %}