How can I edit my banner to avoid overlay on desktop view?

How can I edit my banner to avoid overlay on desktop view?

FabriekStudio
New Member
12 0 0

I'd like  to see the banner content beyond the image and not over the image.

When I see by mobile is correct.. but on desktop it is overlay.

 

How could I edit it as mobile version only?

 

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

{%- assign _section = section.settings -%}
{%- assign is_sub_collection = false -%}

{%- for link in linklists[_section.collections_menu].links -%}
{%- if is_sub_collection -%}
{%- break -%}
{%- endif -%}

{%- for sublink in link.links -%}
{%- if sublink.object.handle != collection.handle -%}
{%- continue -%}
{%- endif -%}

{%- assign is_sub_collection = true -%}

{%- break -%}
{%- endfor -%}
{%- endfor -%}

{%- if settings.show_breadcrumbs -%}
{{- 'component-breadcrumbs.css' | asset_url | stylesheet_tag -}}
{%- endif -%}

<div class="collection-banner{% unless _section.show_collection_image and collection.featured_image != blank %} collection-banner--no-image{% endunless %}">
{%- if settings.show_breadcrumbs -%}
<div class="collection-banner__breadcrumbs container">
{%- render 'breadcrumbs', mod_page_title: collection.title -%}
</div><!-- /.collection-banner__breadcrumbs -->
{%- endif -%}

{%- if _section.show_collection_image and collection.featured_image != blank -%}
<div class="collection-banner__image">
{%- render 'collection-image'
with collection as collection_ref,
classes: 'collection-banner__media',
is_sub_collection: is_sub_collection,
image_vertical_position: section.settings.image_vertical_position
-%}

<span class="collection-banner__overlay" style="opacity: {{ _section.image_overlay_opacity | default: 0 }}%;"></span>
</div><!-- /.collection-banner__media -->
{%- endif -%}

<div class="collection-banner__inner container">
<div class="collection-banner__content">
<h1 class="collection-banner__title h4">
<span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
{{- collection.title | escape -}}
</h1>

{%- if _section.show_collection_description -%}
<div class="collection-banner__entry{% unless _section.collections_menu_style == 'links' %} collection-banner__entry--alt{% endunless %}">
{{- collection.description -}}
</div><!-- /.collection-banner__entry -->
{%- endif -%}
</div><!-- /.collection-banner__content -->

{%-
liquid
if _section.collections_menu != blank
assign class = ''
if section.settings.collections_menu_style != 'links'
assign class = 'large-up-hide'
endif
render 'collections-menu', class: class
endif
-%}
</div><!-- /.collection-banner__inner -->
</div><!-- /.collection-banner -->

{%- if _section.collections_menu != blank and section.settings.collections_menu_style != 'links' -%}
<div class="container">
{%- render 'collections-menu', class: 'small-hide medium-hide' -%}
</div><!-- /.container -->
{%- endif -%}

{% schema %}
{
"name": "t:sections.main-collection-banner.name",
"settings": [
{
"type": "paragraph",
"content": "t:sections.main-collection-banner.settings.paragraph.content"
},
{
"type": "checkbox",
"id": "show_collection_description",
"default": true,
"label": "t:sections.main-collection-banner.settings.show_collection_description.label"
},
{
"type": "checkbox",
"id": "show_collection_image",
"default": true,
"label": "t:sections.main-collection-banner.settings.show_collection_image.label",
"info": "t:sections.main-collection-banner.settings.show_collection_image.info"
},
{
"type": "select",
"id": "image_vertical_position",
"label": "t:sections.main-collection-banner.settings.image_vertical_position.label",
"options": [
{
"value": "top",
"label": "t:sections.main-collection-banner.settings.image_vertical_position.options.top.label"
},
{
"value": "center",
"label": "t:sections.main-collection-banner.settings.image_vertical_position.options.center.label"
},
{
"value": "bottom",
"label": "t:sections.main-collection-banner.settings.image_vertical_position.options.bottom.label"
}
],
"default": "center"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"label": "t:sections.main-collection-banner.settings.image_overlay_opacity.label",
"default": 50
},
{
"type": "header",
"content": "t:sections.main-collection-banner.settings.header_menu.content",
"info": "t:sections.main-collection-banner.settings.header_menu.info"
},
{
"type": "link_list",
"id": "collections_menu",
"label": "t:sections.main-collection-banner.settings.collections_menu.label",
"info": "t:sections.main-collection-banner.settings.collections_menu.info"
},
{
"type": "select",
"id": "collections_menu_style",
"label": "t:sections.main-collection-banner.settings.collections_menu_style.label",
"options": [
{
"value": "links",
"label": "t:sections.main-collection-banner.settings.collections_menu_style.options.option_1.label"
},
{
"value": "thumbnails-square",
"label": "t:sections.main-collection-banner.settings.collections_menu_style.options.option_2.label"
},
{
"value": "thumbnails-round",
"label": "t:sections.main-collection-banner.settings.collections_menu_style.options.option_3.label"
}
],
"default": "thumbnails-round"
}
],
"blocks": [
{
"type": "menu-item",
"name": "t:sections.main-collection-banner.blocks.menu-item.name",
"settings": [
{
"type": "text",
"id": "title",
"label": "t:sections.main-collection-banner.blocks.menu-item.settings.title.label",
"info": "t:sections.main-collection-banner.blocks.menu-item.settings.title.info"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.main-collection-banner.blocks.menu-item.settings.image.label"
}
]
}
]

}
{% endschema %}

Replies 3 (3)

ennovative-it
Shopify Partner
90 10 8

Hello, can u send me the url of a page example?

FabriekStudio
New Member
12 0 0

The theme is not published. I attached the screenshots..

Schermata 2023-06-08 alle 16.31.52.pngSchermata 2023-06-08 alle 16.32.02.png

ennovative-it
Shopify Partner
90 10 8

Senza la pagina avanti non posso aiutarti, dovrei vedere le classi degli elementi, dovresti farmi degli screen dell'ispezione elemento, se non hai problemi posso chiederti l'accesso come collaboratore e te lo faccio un secondo