Hey there!
I’m trying to make an accordion footer on my website, but only for mobile users. I’m very happy with the desktop version. But on the mobile, it takes so much space. I know this question is asked many times and I tried to code it by myself, but sadly it didn’t work and I spent days with it.
would highly appreciate it, if someone could help me.
So here is the html code of the footer liquid
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>
<footer class="footer color-{{ section.settings.color_scheme }} gradient">
{%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
<div class="footer__content-top page-width">
{%- if section.blocks.size > 0 -%}
{%- liquid
if section.blocks.size == 9
assign footer_grid_class = 'grid--3-col-tablet'
elsif section.blocks.size > 6
assign footer_grid_class = 'grid--4-col-desktop'
elsif section.blocks.size > 4
assign footer_grid_class = 'grid--3-col-tablet'
endif
-%}
<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
{%- for block in section.blocks -%}
<div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.heading != blank -%}
<h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
{%- endif -%}
{%- case block.type -%}
{%- when 'text' -%}
<div class="footer-block__details-content rte">
{{ block.settings.subtext }}
</div>
{%- when 'link_list' -%}
{%- if block.settings.menu != blank and block.settings.heading != blank -%}
<ul class="footer-block__details-content list-unstyled">
{%- for link in block.settings.menu.links -%}
<li>
<a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
{{ link.title }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- when 'image' -%}
<div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
{%- if block.settings.image != blank -%}
{%- assign image_size = block.settings.image_width | append: 'x' -%}
<img
srcset= "{{ block.settings.image | img_url: image_size }}, {{ block.settings.image | img_url: image_size, scale: 2 }} 2x"
src="{{ block.settings.image | img_url: '400x' }}"
alt="{{ block.settings.image.alt | escape }}"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
style="max-width: min(100%, {{ block.settings.image_width }}px);"
>
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
<div class="footer-block--newsletter">
{%- if section.settings.newsletter_enable -%}
<div class="footer-block__newsletter">
{%- if section.settings.newsletter_heading != blank -%}
<h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</h2>
{%- endif -%}
{%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter-form__field-wrapper">
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="ContactFooter-error"
{% elsif form.posted_successfully? %}
aria-describedby="ContactFooter-success"
{% endif %}
placeholder="{{ 'newsletter.label' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
<button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
{% render 'icon-arrow' %}
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}
</div>
{%- if form.posted_successfully? -%}
<h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
{%- endif -%}
{%- endform -%}
</div>
{%- endif -%}
{%- if section.settings.show_social -%}
<ul class="footer__list-social list-unstyled list-social" role="list">
{%- if settings.social_twitter_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_twitter_link }}" class="link list-social__link" >
{%- render 'icon-twitter' -%}
<span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_facebook_link }}" class="link list-social__link" >
{%- render 'icon-facebook' -%}
<span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_pinterest_link }}" class="link list-social__link" >
{%- render 'icon-pinterest' -%}
<span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_instagram_link }}" class="link list-social__link" >
{%- render 'icon-instagram' -%}
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tiktok_link }}" class="link list-social__link" >
{%- render 'icon-tiktok' -%}
<span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tumblr_link }}" class="link list-social__link" >
{%- render 'icon-tumblr' -%}
<span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_snapchat_link }}" class="link list-social__link" >
{%- render 'icon-snapchat' -%}
<span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_youtube_link }}" class="link list-social__link" >
{%- render 'icon-youtube' -%}
<span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_vimeo_link }}" class="link list-social__link" >
{%- render 'icon-vimeo' -%}
<span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
</a>
</li>
{%- endif -%}
</ul>
{%- endif -%}
</div>
</div>
{%- endif -%}
<div class="footer__content-bottom">
<div class="footer__content-bottom-wrapper page-width">
<div class="footer__column footer__localization">
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
<noscript>
{%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
<select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
{%- for country in localization.available_countries -%}
<option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
{%- endform -%}
</noscript>
<localization-form>
{%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
<div class="no-js-hidden">
<h2 class="caption-large text-body" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
<div class="disclosure">
<button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterCountryList" aria-describedby="FooterCountryLabel">
{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
{% render 'icon-caret' %}
</button>
<ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled" hidden>
{%- for country in localization.available_countries -%}
<li class="disclosure__item" tabindex="-1">
<a class="link link--text disclosure__link caption-large{% if country.iso_code == localization.country.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#"{% if country.iso_code == localization.country.iso_code %} aria-current="true"{% endif %} data-value="{{ country.iso_code }}">
{{ country.name }} <span class="localization-form__currency">({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
</a>
</li>
{%- endfor -%}
</ul>
</div>
<input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
<noscript>
{%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterLanguageLabelNoScript">{{ 'localization.language_label' | t }}</h2>
<select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript">
{%- for language in localization.available_languages -%}
<option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
{{ language.endonym_name | capitalize }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
{%- endform -%}
</noscript>
<localization-form>
{%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
<div class="no-js-hidden">
<h2 class="caption-large text-body" id="FooterLanguageLabel">{{ 'localization.language_label' | t }}</h2>
<div class="disclosure">
<button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterLanguageList" aria-describedby="FooterLanguageLabel">
{{ localization.language.endonym_name | capitalize }}
{% render 'icon-caret' %}
</button>
<ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled" hidden>
{%- for language in localization.available_languages -%}
<li class="disclosure__item" tabindex="-1">
<a class="link link--text disclosure__link caption-large{% if language.iso_code == localization.language.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#" hreflang="{{ language.iso_code }}" lang="{{ language.iso_code }}"{% if language.iso_code == localization.language.iso_code %} aria-current="true"{% endif %} data-value="{{ language.iso_code }}">
{{ language.endonym_name | capitalize }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
<input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
</div>
<div class="footer__column footer__column--info">
{%- if section.settings.payment_enable -%}
<div class="footer__payment">
<span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
<ul class="list list-payment" role="list">
{%- for type in shop.enabled_payment_types -%}
<li class="list-payment__item">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
<div class="footer__copyright caption">
<small class="copyright__content">© {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
<small class="copyright__content">{{ powered_by_link }}</small>
</div>
</div>
</div>
</div>
</footer>
{% javascript %}
class LocalizationForm extends HTMLElement {
constructor() {
super();
this.elements = {
input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
button: this.querySelector('button'),
panel: this.querySelector('ul'),
};
this.elements.button.addEventListener('click', this.openSelector.bind(this));
this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
this.addEventListener('keyup', this.onContainerKeyUp.bind(this));
this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
}
hidePanel() {
this.elements.button.setAttribute('aria-expanded', 'false');
this.elements.panel.setAttribute('hidden', true);
}
onContainerKeyUp(event) {
if (event.code.toUpperCase() !== 'ESCAPE') return;
this.hidePanel();
this.elements.button.focus();
}
onItemClick(event) {
event.preventDefault();
const form = this.querySelector('form');
this.elements.input.value = event.currentTarget.dataset.value;
if (form) form.submit();
}
openSelector() {
this.elements.button.focus();
this.elements.panel.toggleAttribute('hidden');
this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
}
closeSelector(event) {
const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === 'BUTTON';
if (event.relatedTarget === null || shouldClose) {
this.hidePanel();
}
}
}
customElements.define('localization-form', LocalizationForm);
{% endjavascript %}
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
{
"type": "link_list",
"name": "t:sections.footer.blocks.link_list.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Quick links",
"label": "t:sections.footer.blocks.link_list.settings.heading.label",
"info": "t:sections.footer.blocks.link_list.settings.heading.info"
},
{
"type": "link_list",
"id": "menu",
"default": "footer",
"label": "t:sections.footer.blocks.link_list.settings.menu.label",
"info": "t:sections.footer.blocks.link_list.settings.menu.info"
}
]
},
{
"type": "text",
"name": "t:sections.footer.blocks.text.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Heading",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "richtext",
"id": "subtext",
"default": "<p>Share store details, promotions, or brand content with your customers.</p>",
"label": "t:sections.footer.blocks.text.settings.subtext.label"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 50,
"max": 200,
"step": 5,
"unit": "px",
"label": "Image width",
"default": 100
},
{
"type": "select",
"id": "alignment",
"label": "Image alignment on large screen",
"options": [
{
"value": "",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
}
]
}
],
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.footer.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.footer.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.footer.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.footer.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.footer.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.footer.settings.color_scheme.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__1.content",
"info": "t:sections.footer.settings.header__1.info"
},
{
"type": "checkbox",
"id": "newsletter_enable",
"default": true,
"label": "t:sections.footer.settings.newsletter_enable.label"
},
{
"type": "text",
"id": "newsletter_heading",
"default": "Subscribe to our emails",
"label": "t:sections.footer.settings.newsletter_heading.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__2.content",
"info": "t:sections.footer.settings.header__2.info"
},
{
"type": "checkbox",
"id": "show_social",
"default": false,
"label": "t:sections.footer.settings.show_social.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__3.content",
"info": "t:sections.footer.settings.header__4.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"default": true,
"label": "t:sections.footer.settings.enable_country_selector.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__5.content",
"info": "t:sections.footer.settings.header__6.info"
},
{
"type": "checkbox",
"id": "enable_language_selector",
"default": true,
"label": "t:sections.footer.settings.enable_language_selector.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__7.content"
},
{
"type": "checkbox",
"id": "payment_enable",
"default": true,
"label": "t:sections.footer.settings.payment_enable.label"
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}
and here is the css of the footer:
.footer {
border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
}
.footer:not(.color-background-1) {
border-top: none;
}
.footer__content-top {
padding-bottom: 5rem;
padding-top: 5rem;
display: block;
}
@media screen and (max-width: 749px) {
.footer .grid {
display: block;
margin-left: 0;
}
.footer-block.grid__item {
padding: 0;
margin: 4rem 0;
width: 100%;
}
.footer-block.grid__item:first-child {
margin-top: 0;
}
.footer__content-top {
padding-bottom: 3rem;
padding-left: calc(4rem / var(--font-body-scale));
padding-right: calc(4rem / var(--font-body-scale));
}
}
@media screen and (min-width: 750px) {
.footer__content-top .grid {
margin-left: -3rem;
row-gap: 6rem;
margin-bottom: 0;
}
.footer__content-top .grid__item {
padding-left: 3rem;
}
}
.footer__content-bottom {
border-top: solid 0.1rem rgba(var(--color-foreground), 0.08);
padding-top: 3rem;
padding-bottom: 3rem;
}
.footer__content-bottom:only-child {
border-top: 0;
}
.footer__content-bottom-wrapper {
display: flex;
width: 100%;
}
@media screen and (max-width: 749px) {
.footer__content-bottom {
flex-wrap: wrap;
padding-top: 0;
padding-left: 0;
padding-right: 0;
row-gap: 1.5rem;
}
.footer__content-bottom-wrapper {
flex-wrap: wrap;
row-gap: 1.5rem;
}
}
.footer__localization:empty + .footer__column--info {
align-items: center;
}
@media screen and (max-width: 749px) {
.footer__localization:empty + .footer__column {
padding-top: 1.5rem;
}
}
.footer__column {
width: 100%;
align-items: flex-end;
}
.footer__column--info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-left: 2rem;
padding-right: 2rem;
}
@media screen and (min-width: 750px) {
.footer__column--info {
padding-left: 0;
padding-right: 0;
align-items: flex-end;
}
}
.footer-block:only-child:last-child {
text-align: center;
max-width: 76rem;
margin: 0 auto;
}
@media screen and (min-width: 750px) {
.footer-block {
display: block;
margin-top: 0;
}
}
.footer-block:empty {
display: none;
}
.footer-block--newsletter {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
margin-top: 2rem;
}
.footer-block--newsletter:only-child {
margin-top: 0;
}
.footer-block--newsletter > * {
flex: 1 1 100%;
}
@media screen and (max-width: 749px) {
.footer-block.footer-block--menu:only-child {
text-align: left;
}
}
@media screen and (min-width: 750px) {
.footer-block--newsletter {
flex-wrap: nowrap;
justify-content: space-between;
}
}
.footer-block__heading {
margin-bottom: 2rem;
margin-top: 0;
font-size: calc(var(--font-heading-scale) * 1.6rem);
}
@media screen and (min-width: 990px) {
.footer-block__heading {
font-size: calc(var(--font-heading-scale) * 1.8rem);
}
}
.footer__list-social:empty,
.footer-block--newsletter:empty {
display: none;
}
.footer__list-social.list-social:only-child {
justify-content: center;
}
.footer-block__newsletter {
text-align: center;
}
.newsletter-form__field-wrapper {
max-width: 36rem;
}
@media screen and (min-width: 750px) {
.footer-block__newsletter:not(:only-child) {
text-align: left;
}
.footer-block__newsletter:not(:only-child) .footer__newsletter {
justify-content: flex-start;
margin: 0;
}
.footer-block__newsletter:not(:only-child) .newsletter-form__message--success {
left: auto;
}
}
.footer-block__newsletter + .footer__list-social {
margin-top: 3rem;
}
@media screen and (max-width: 749px) {
.footer__list-social.list-social {
justify-content: center;
}
}
@media screen and (min-width: 750px) {
.footer-block__newsletter + .footer__list-social {
margin-top: 0;
}
}
@media screen and (min-width: 750px) {
.footer__content-bottom {
border-top-width: 0.1rem;
}
}
.footer__localization {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
flex-wrap: wrap;
padding: 1rem 1rem 0;
}
.footer__localization:empty {
display: none;
}
.localization-form {
display: flex;
flex-direction: column;
flex: auto 1 0;
padding: 1rem;
margin: 0 auto;
}
.localization-form:only-child {
display: inline-flex;
flex-wrap: wrap;
flex: initial;
padding: 1rem 0;
}
.localization-form:only-child .button,
.localization-form:only-child .localization-form__select {
margin: 1rem 1rem 0.5rem;
flex-grow: 1;
width: auto;
}
.footer__localization h2 {
margin: 1rem 1rem 0.5rem;
color: rgba(var(--color-foreground), 0.75);
}
@media screen and (min-width: 750px) {
.footer__localization {
padding: 0.4rem 0;
justify-content: flex-start;
}
.localization-form {
padding: 1rem 2rem 1rem 0;
}
.localization-form:first-of-type {
padding-left: 0;
}
.localization-form:only-child {
justify-content: start;
width: auto;
margin: 0 0 0 -1rem;
}
.localization-form:only-child .button,
.localization-form:only-child .localization-form__select {
margin: 1rem;
}
}
@media screen and (max-width: 989px) {
noscript .localization-form:only-child,
.footer__localization noscript {
width: 100%;
}
}
.localization-form .button {
padding: 1rem;
}
.localization-form__currency {
display: inline-block;
}
@media screen and (max-width: 749px) {
.localization-form .button {
word-break: break-all;
}
}
.localization-form__select {
box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
position: relative;
margin-bottom: 1.5rem;
border: 0.1rem solid transparent;
padding-left: 1rem;
text-align: left;
}
noscript .localization-form__select {
padding-left: 0rem;
}
@media screen and (min-width: 750px) {
noscript .localization-form__select {
min-width: 20rem;
}
}
.localization-form__select .icon-caret {
position: absolute;
content: '';
height: 0.6rem;
right: 1.5rem;
top: calc(50% - 0.2rem);
}
.localization-selector.link {
text-decoration: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
color: rgb(var(--color-foreground));
width: 100%;
padding-right: 4rem;
padding-bottom: 1.5rem;
}
noscript .localization-selector.link {
padding-top: 1.5rem;
padding-left: 1.5rem;
}
.disclosure .localization-form__select {
padding-top: 1.5rem;
}
.localization-selector option {
color: #000000;
}
.localization-selector + .disclosure__list {
margin-left: 1rem;
opacity: 1;
animation: animateLocalization var(--duration-default) ease;
}
@media screen and (min-width: 750px) {
.footer__payment {
margin-top: 1.5rem;
}
}
.footer__copyright {
text-align: center;
margin-top: 1.5rem;
}
@media screen and (min-width: 750px) {
.footer__copyright {
text-align: right;
}
}
/* .footer__copyright a {
font-size: 1.3rem;
text-decoration: none;
color: currentColor;
}
.footer__copyright a:hover {
opacity: 0.75;
} */
@keyframes appear-down {
0% {
opacity: 0;
margin-top: -1rem;
}
100% {
opacity: 1;
margin-top: 0;
}
}
.footer-block__details-content {
margin-bottom: 4rem;
}
@media screen and (min-width: 750px) {
.footer-block__details-content {
margin-bottom: 0;
}
.footer-block__details-content > p,
.footer-block__details-content > li {
padding: 0;
}
.footer-block:only-child li {
display: inline;
}
.footer-block__details-content > li:not(:last-child) {
margin-right: 1.5rem;
}
}
.footer-block__details-content .list-menu__item--link,
.copyright__content a {
color: rgba(var(--color-foreground), 0.75);
}
.footer-block__details-content .list-menu__item--active {
transition: text-decoration-thickness var(--duration-short) ease;
color: rgb(var(--color-foreground));
}
@media screen and (min-width: 750px) {
.footer-block__details-content .list-menu__item--link:hover,
.copyright__content a:hover {
color: rgb(var(--color-foreground));
text-decoration: underline;
text-underline-offset: 0.3rem;
}
.footer-block__details-content .list-menu__item--active:hover {
text-decoration-thickness: 0.2rem;
}
}
@media screen and (max-width: 989px) {
.footer-block__details-content .list-menu__item--link {
padding-top: 1rem;
padding-bottom: 1rem;
}
}
@media screen and (min-width: 750px) {
.footer-block__details-content .list-menu__item--link {
display: inline-block;
font-size: 1.4rem;
}
.footer-block__details-content > :first-child .list-menu__item--link {
padding-top: 0;
}
}
@media screen and (max-width: 749px) {
.footer-block-image {
text-align: center;
}
}
.footer-block-image > img {
height: auto;
}
.footer-block__details-content .placeholder-svg {
max-width: 20rem;
}
.copyright__content a {
color: currentColor;
text-decoration: none;
}
@keyframes animateLocalization {
0% {
opacity: 0;
transform: translateY(0);
}
100% {
opacity: 1;
transform: translateY(-1rem);
}
}
.footer .disclosure__link {
padding: 0.95rem 3.5rem 0.95rem 2rem;
color: rgba(var(--color-foreground), 0.75);
}
.footer .disclosure__link:hover {
color: rgb(var(--color-foreground));
}
.footer .disclosure__link--active {
text-decoration: underline;
}
Thank you very very much and best Regards from Switzerland!
Sascha