diff --git a/sections/hero.liquid b/sections/hero.liquid index 4abcf4726..d3dacba57 100644 --- a/sections/hero.liquid +++ b/sections/hero.liquid @@ -102,7 +102,7 @@ assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile assign widths = '832, 1200, 1600, 1920, 2560, 3840' assign sizes_mobile = media_width_mobile - assign mobile_widths = '416, 600, 800, 1200, 1600' + assign mobile_widths = '165, 360, 535, 750, 1070, 1500' assign mobile_widths_array = mobile_widths | split: ', ' assign fetch_priority = 'auto' diff --git a/snippets/card-gallery.liquid b/snippets/card-gallery.liquid index 31de0c1e5..c3865a3ca 100644 --- a/snippets/card-gallery.liquid +++ b/snippets/card-gallery.liquid @@ -11,7 +11,7 @@ {% liquid assign product = closest.product assign block_settings = block.settings - assign image_sizes = '(min-width: 750px) 50vw, 100vw' + assign image_sizes = '(min-width: 750px) 50vw, 50vw' # Check if product has badges and determine position assign has_badges = false @@ -39,7 +39,7 @@ assign image_sizes = sizes_attribute | strip elsif section.settings.columns and section.settings.layout_type != 'editorial' assign viewport_width = 100.0 | divided_by: section.settings.columns - assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 100vw' | replace: '[viewport_width]', viewport_width + assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 50vw' | replace: '[viewport_width]', viewport_width assign image_sizes = sizes_attribute | strip endif diff --git a/snippets/product-media.liquid b/snippets/product-media.liquid index 37f46c10f..7f8f1811c 100644 --- a/snippets/product-media.liquid +++ b/snippets/product-media.liquid @@ -18,7 +18,7 @@ {%- enddoc -%} {% liquid - assign widths = widths | default: '240, 352, 832, 1200, 1600, 1920, 2560, 3840' + assign widths = widths | default: '165, 360, 535, 750, 1070, 1500, 1920, 2560, 3840' assign ref_image_to_transition = '' if settings.transition_to_main_product assign ref_image_to_transition = 'imagesToTransition[]' diff --git a/snippets/resource-card.liquid b/snippets/resource-card.liquid index 5ffb95953..4195087e2 100644 --- a/snippets/resource-card.liquid +++ b/snippets/resource-card.liquid @@ -18,7 +18,7 @@ assign ratio = image_aspect_ratio endif assign image_width = image_width | default: 1200 - assign widths = '240, 352, 832, 1200' + assign widths = '165, 360, 535, 750, 1070, 1500' assign image_sizes = image_sizes | default: 'auto' assign single_thumbnail_collection = false if resource_type == 'collection' and collection_thumbnails != 'multiple' diff --git a/snippets/util-autofill-img-size-attr.liquid b/snippets/util-autofill-img-size-attr.liquid index 08d0b8b0d..1a0e5af44 100644 --- a/snippets/util-autofill-img-size-attr.liquid +++ b/snippets/util-autofill-img-size-attr.liquid @@ -66,7 +66,7 @@ endif assign sizes_attr = sizes_attr | append: '(min-width: ' | append: min_breakpoint | append: 'px) 50vw' - assign sizes_attr = sizes_attr | append: ', 100vw' + assign sizes_attr = sizes_attr | append: ', 50vw' # Echo the sizes attribute echo sizes_attr diff --git a/snippets/util-product-media-sizes-attr.liquid b/snippets/util-product-media-sizes-attr.liquid index 8458af158..5b4f1b820 100644 --- a/snippets/util-product-media-sizes-attr.liquid +++ b/snippets/util-product-media-sizes-attr.liquid @@ -50,16 +50,16 @@ if calculate_single_column # Default for carousel or single column grid (or first image in large_first_image mode) if section.settings.equal_columns == false - assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), 100vw' | replace: '[gap_half]', gap_half + assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half else - assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), 100vw' | replace: '[gap_half]', gap_half + assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half endif else # Default for two column grid - includes image gap and quarter section gap if section.settings.equal_columns == false - assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half + assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half else - assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half + assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half endif endif @@ -116,7 +116,7 @@ else assign medium_size = 'calc([medium_base] - [page_margin] - [gap_quarter] - [image_gap_half])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half endif - assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size + assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size else # Single column calculation if block_settings.extend_media @@ -130,7 +130,7 @@ else assign medium_size = 'calc([medium_base] - [page_margin] - [gap_half] - [page_margin])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_half]', gap_half endif - assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size + assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size endif else # Use default sizes