Two different banners for mobile and desktop on dawn theme with fixed banner while scrolling

[real_Maestro]

Hello!

I wanted to have different banners on desktop and mobile, so for that i found a thread, where it told me to open section-banner-image.css and pasted this code to the last line:

.banner__media:first-child {
width: 100%;
}
.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: 150% !important;
}
}

And it worked, but it has 2 problems:

1: the image quality (which is originally great and was displayed great before the code) gets bad and i dont know why. The second problem: i wanted to have the banners fixed while scrolling. But if i choose that from the drop down menu, the “two banners” solution wouldnt work anymore and the two banners are displayed side by side again.

So i decided to search for a code, which allowed fixed banners. I found out, that i should paste this into theme.liquid:

.banner .banner__media.media img { position: fixed; }

That worked too, but now the footer is transparent (which i dont want). All codes i tried to change the background of the footer didnt work.

So i need help on why the banner quality gets reduced when i paste the first code and how i can fix the second code so that the footer dont get transparent.

Thanks in advance,

kind regards

Attila

P.S.: This is the shop https://www.fiveprayers.de

[Spac-es]

This code will prevent your footer from being transparent; add it to your base.css file:

footer.footer.color-scheme-4.gradient.section-sections--20767575638364__footer-padding {
  z-index: 999999;
  position: absolute;
  width: 100%;
}

By the way, the first issue you mentioned about the image quality doesn’t seem to affect me; I feel it looks pretty good, to be honest.

[real_Maestro]

Hey, thanks a LOT! The footer problem is solved. The image seems nice for you, because i deleted the codes to try something else. can you check again please?

Thanks in adavance!

[Spac-es]

Would you mind diving into your code (image-banner.liquid) and taking a screenshot to see your HTML structure exactly? I think I know what the issue is, but it’s a bit tricky to explain… If you’d like, I can access your website and do it myself.

[real_Maestro]

Hey!

Thanks for your efforts! I’d like to try it, but if you say its too complicated, then i would appreciate your help! This is the content in the image-banner.liquid file:

Show More

{%- if section.settings.image != blank -%}
{%- 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: width: section.settings.image.width, height: image_height, class: image_class, sizes: sizes, widths: widths, fetchpriority: fetch_priority }}
{%- elsif section.settings.image_2 == blank -%}{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%} {%- if section.settings.image_2 != blank -%}{%- 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: width: section.settings.image_2.width, height: image_height_2, class: image_class_2, sizes: sizes, widths: widths, fetchpriority: fetch_priority }}
{%- endif -%}
{%- for block in section.blocks -%} {%- case block.type -%} {%- when 'heading' -%}## {{ block.settings.heading }}{%- when 'text' -%}

{{ block.settings.text }}

{%- when 'buttons' -%}{%- if block.settings.button_label_1 != blank -%} {{- block.settings.button_label_1 | escape -}} {%- endif -%} {%- if block.settings.button_label_2 != blank -%} {{- block.settings.button_label_2 | escape -}} {%- endif -%}
{%- endcase -%} {%- endfor -%}

{% 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": "scheme-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 %} ```

[Spac-es]

We would need to run some tests, but theoretically, if you remove this code, it should fix the issue.

{%- liquid
assign full_width = '100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 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
assign fetch_priority = 'auto'
if section.index == 1
assign fetch_priority = 'high'
endif
-%}

Once you do that, you’ll notice that certain lines in your code will be highlighted in orange. You can go ahead and delete these lines as well. Here’s an example:

Before:

After:

[real_Maestro]

YOU, Sir, are a GENIUS!

Thank you so so so much. It is perfect now. Guys like you are the real Heros.

[Spac-es]

Wow! Thanks for those words, I’m glad I could help!

[PourStudios]

I am running into this same issue with my site and need help.