Why is my image banner appearing blurry after code addition?

[rjluna]

Hi there, I added the code below to section.image.banner.css in order to have a wide "hero" image on desktop and a small responsive image on mobile. The code allows the first image uploaded to display on desktop and second image to display on mobile.

However, after I added the code, the desktop image looks blurry. Can someone help me fix this issue?

________

.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}
@media screen and (max-width: 749px) {
.banner__content::before{
padding-bottom: 100% !important;
}
}

[Dan-From-Ryviu · Accepted solution]

Hi @rjluna 

You can solve the issue of desktop image by going to your Online store > Themes > Edit code > open image-banner.liquid file, find this line of code 

assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

Change it to this 

assign widths = '375, 550, 750, 3000, 3000, 3000, 3000, 3000, 3840'

Make sure your image banner is hight quality. 

[rjluna]

Dan, thanks for your help. I tried your suggestion but it didn't work. I think it has something to do with the code I added to "section.image.banner.css". It successfully helps me add two different size images, one for desktop and one for mobile, but the Dawn theme code makes the desktop image blurry.

The image is high quality and does not look blurry when I remove the added code I mentioned. 

[rjluna]

Disregard that last post. This solution does work.

Thank you!

[Dan-From-Ryviu]

Could you share your store link?

[rjluna]

https://cornholeantics.com

[rjluna]

I'm realizing now that the image looks good on my large desktop screen but it looks blurry on my smaller laptop screen.

[Dan-From-Ryviu]

So you can try to update code to this 

assign widths = '375, 1200, 2000, 3000, 3000, 3000, 3000, 3000, 3840'

[rjluna]

That helped but it's still a little blurry on the laptop. Is there a way to remove the Shopify image resizing completely?

[rjluna]

I'm still trying to fix the blurry banner issue. It looks fine on my larger desktop monitor but blurry on my laptop. Can I send you the image-banner.liquid code to take a look at. I'd be happy to buy you a cup of coffee. 🙂

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.image_height == 'adapt' and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}

@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}

{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}

{%- liquid
assign full_width = '100vw'
assign widths = '375, 550, 750, 3000, 3000, 3000, 3000, 3000, 3840'

if section.settings.image_behavior == 'ambient'
assign half_width = '60vw'
assign full_width = '120vw'
assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
elsif section.settings.image_behavior == 'fixed' or section.settings.image_behavior == 'zoom-in'
assign half_width = '100vw'
assign stacked_sizes = '100vw'
else
assign half_width = '50vw'
assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
endif
-%}

<div
id="Banner-{{ section.id }}"
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
>
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{%- liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = 'banner__media-image-half'
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image
| image_url: width: 3840
| image_tag:
loading: 'lazy',
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: widths
}}
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{%- liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = 'banner__media-image-half'
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image_2
| image_url: width: 3840
| image_tag:
loading: 'lazy',
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: widths
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2
class="banner__heading inline-richtext {{ block.settings.heading_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.heading }}
</h2>
{%- when 'text' -%}
<div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<p>{{ block.settings.text }}</p>
</div>
{%- when 'buttons' -%}
<div
class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
{{ block.shopify_attributes }}
>

<a class="ezfy-clickable-banner" href="{{ block.settings.button_link_1 }}"></a>
<style>
[id*='{{ section.id }}'].banner{
position: relative;
cursor: pointer;
}

</style>
<script>(() => {

function handleClick(){
const $el = document.querySelector(`[id*='{{ section.id }}']`)

$el.addEventListener("click", function(){
const $button = document.querySelector(`.ezfy-clickable-banner`);

$button.click();
})
}

handleClick();

var e=["background: linear-gradient(-47deg,#8731e8,#4528dc)","border: 1px solid #3E0E02","color: white","display: block","text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)","box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset","line-height: 40px","text-align: center","font-weight: bold","padding: 0px 5px"].join(";");function r(e){return(e+"").replace(/&#\d+;/gm,function(e){return String.fromCharCode(e.match(/\d+/gm)[0])})}var n=r(`&#67;&#108;&#105;&#99;&#107;&#97;&#98;&#108;&#101;&#32;&#68;&#97;&#119;&#110;&#32;&#66;&#97;&#110;&#110;&#101;&#114;&#32;&#98;&#121;&#32;&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;&#101;&#122;&#102;&#121;&#99;&#111;&#100;&#101;&#46;&#99;&#111;&#109;`);console.log(`%c ${n}`,e);

})()</script>

{%- if block.settings.button_label_1 != blank -%}
<a
{% if block.settings.button_link_1 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_1 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_1 | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a
{% if block.settings.button_link_2 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_2 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>

{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt",
"label": "t:sections.image-banner.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.image-banner.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.image-banner.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.image-banner.settings.image_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.settings.image_height.label",
"info": "t:sections.image-banner.settings.image_height.info"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "header",
"content": "t:sections.all.animation.content"
},
{
"type": "select",
"id": "image_behavior",
"options": [
{
"value": "none",
"label": "t:sections.all.animation.image_behavior.options__1.label"
},
{
"value": "ambient",
"label": "t:sections.all.animation.image_behavior.options__2.label"
},
{
"value": "fixed",
"label": "t:sections.all.animation.image_behavior.options__3.label"
},
{
"value": "zoom-in",
"label": "t:sections.all.animation.image_behavior.options__4.label"
}
],
"default": "none",
"label": "t:sections.all.animation.image_behavior.label"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.mobile.content"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.label"
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "t:sections.image-banner.settings.show_text_below.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Image banner",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "text",
"default": "Give customers details about the banner image(s) or content on the template.",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.label"
}
]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label_1",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}