Hi I’m trying to hide the selected column as part of mobile only (visible in screenshot) .grid__item but I seem to be having issues targeting that specific div class as a unique and it seems to hide the entire section
Thanks
Topic summary
A user needed to hide a specific column in a grid layout on mobile devices only. The challenge was targeting the correct div class without hiding the entire section.
Initial Problem:
- Attempting to use
.grid__itemclass was affecting the entire section rather than the specific column - The user shared their footer Liquid code showing the section structure
Resolution:
- The user successfully solved the issue independently by targeting
.grid__item:first-childin custom CSS - This CSS selector specifically targets only the first grid item, allowing mobile-specific hiding without affecting other elements
Status: Resolved. The discussion demonstrates a common CSS specificity challenge in Shopify theme customization where pseudo-selectors provided the needed precision.
Hi I’m trying to hide the selected column as part of mobile only (visible in screenshot) .grid__item but I seem to be having issues targeting that specific div class as a unique and it seems to hide the entire section
1 Like
Below is my Footer Liquid Code;
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ ‘section-footer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-newsletter.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-payment.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-social.css’ | asset_url | stylesheet_tag }}
{{ ‘component-rte.css’ | asset_url | stylesheet_tag }}
{{ ‘disclosure.css’ | asset_url | stylesheet_tag }}
{%- style -%}
.footer {
margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.footer {
margin-top: {{ section.settings.margin_top }}px;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- 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
-%}
{%- endif -%}
{%- for block in section.blocks -%}
{%- endfor -%}
{%- endif -%}
{%- if block.settings.heading != blank -%}
{{- block.settings.heading | escape -}}
{%- endif -%}{%- case block.type -%}
{%- when ‘text’ -%}
{%- if section.settings.newsletter_heading != blank -%}
{%- if form.posted_successfully? -%}
{%- when 'link_list' -%}
{%- if block.settings.menu != blank -%}
{%- endif -%}
{%- form ‘customer’, id: ‘ContactFooter’, class: ‘footer__newsletter newsletter-form’ -%}
{{ 'newsletter.label' | t }}
{% render 'icon-arrow' %}
{%- if form.errors -%}
{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
{%- endif -%}
{% render 'icon-success' %}{{ 'newsletter.success' | t }}
{%- endif -%} {%- endform -%}-
{%- for link in block.settings.menu.links -%}
- {{ link.title }} {%- endfor -%}
{%- if block.settings.image != blank -%}
{%- assign image_size_2x = block.settings.image_width | times: 2 | at_most: 5760 -%}
![{{ block.settings.image.alt | escape }}]()
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
{%- endcase -%}
{%- if section.settings.newsletter_enable -%}
{%- if section.settings.newsletter_heading != blank -%}
{%- if form.posted_successfully? -%}
{%- endif -%}
{{ section.settings.newsletter_heading | escape }}
{%- endif -%} {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
{{ 'newsletter.label' | t }}
{% render 'icon-arrow' %}
{%- if form.errors -%}
{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
{%- endif -%}
{% render 'icon-success' %}{{ 'newsletter.success' | t }}
{%- endif -%} {%- endform -%}{%- if section.settings.show_social -%}
-
{%- if settings.social_twitter_link != blank -%}
- {%- render 'icon-twitter' -%} {{ 'general.social.links.twitter' | t }} {%- endif -%} {%- if settings.social_facebook_link != blank -%}
- {%- render 'icon-facebook' -%} {{ 'general.social.links.facebook' | t }} {%- endif -%} {%- if settings.social_pinterest_link != blank -%}
- {%- render 'icon-pinterest' -%} {{ 'general.social.links.pinterest' | t }} {%- endif -%} {%- if settings.social_instagram_link != blank -%}
- {%- render 'icon-instagram' -%} {{ 'general.social.links.instagram' | t }} {%- endif -%} {%- if settings.social_tiktok_link != blank -%}
- {%- render 'icon-tiktok' -%} {{ 'general.social.links.tiktok' | t }} {%- endif -%} {%- if settings.social_tumblr_link != blank -%}
- {%- render 'icon-tumblr' -%} {{ 'general.social.links.tumblr' | t }} {%- endif -%} {%- if settings.social_snapchat_link != blank -%}
- {%- render 'icon-snapchat' -%} {{ 'general.social.links.snapchat' | t }} {%- endif -%} {%- if settings.social_youtube_link != blank -%}
- {%- render 'icon-youtube' -%} {{ 'general.social.links.youtube' | t }} {%- endif -%} {%- if settings.social_vimeo_link != blank -%}
- {%- render 'icon-vimeo' -%} {{ 'general.social.links.vimeo' | t }} {%- endif -%}
Subscribe to email
{%- form ‘customer’, id: ‘ContactFooter’, class: ‘footer__newsletter newsletter-form’ -%}
{{ 'newsletter.label' | t }}
{% render 'icon-arrow' %}
{%- if form.errors -%}
{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
{%- endif -%}
{% render 'icon-success' %}{{ 'newsletter.success' | t }}
{%- endif -%} {%- endform -%}
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
{%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
{{ 'localization.update_country' | t }}
{%- endform -%}
{%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
{%- endform -%}
{%- endif -%}
{{ 'localization.update_language' | t }}
{%- endform -%}
{%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
{%- endform -%}
{%- endif -%}
{{ 'localization.country_label' | t }}
{% render 'icon-caret' %}{{ 'localization.country_label' | t }}
{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
{% render 'icon-caret' %}
-
{%- for country in localization.available_countries -%}
- {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }}) {%- endfor -%}
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
{%- form ‘localization’, id: ‘FooterLanguageFormNoScript’, class: ‘localization-form’ -%}
{{ 'localization.language_label' | t }}
{% render 'icon-caret' %}{{ 'localization.language_label' | t }}
{{ localization.language.endonym_name | capitalize }}
{% render 'icon-caret' %}
-
{%- for language in localization.available_languages -%}
- {{ language.endonym_name | capitalize }} {%- endfor -%}
{%- if section.settings.payment_enable -%}
{{ 'sections.footer.payment' | t }}
{%- endif -%}
-
{%- for type in shop.enabled_payment_types -%}
- {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }} {%- endfor -%}
© {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}, Bleue Burnham LTD, 180 The Strand, London, WC2R 1EA, UK. Company Number: 11856265
{{ }}
{% 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(‘.disclosure__list-wrapper’),
};
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”
},
{
“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”: “
Share contact information, store details, and brand content with your customers.
”,“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.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.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”
},
{
“type”: “header”,
“content”: “t:sections.all.spacing”
},
{
“type”: “range”,
“id”: “margin_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.footer.settings.margin_top.label”,
“default”: 0
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“default”: {
“blocks”: [
{
“type”: “link_list”
},
{
“type”: “text”
}
]
}
}
{% endschema %} @media (max-width: 749px) { .grid .footer-block.grid__item { margin: 0; } .grid .footer-block__heading { position: relative; margin: 0; padding: 1.5rem 0; cursor: pointer; } .grid .footer-block__heading::after { content: "ˇ"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; text-align: center; } .grid .footer-block__heading:not(.block-collapsed)::after { content: "-"; } .grid .footer-block__heading.block-collapsed + #footer-block-index-2!important; .grid .footer-block__heading.block-collapsed + .footer-block__details-content { visibility: hidden; opacity: 0; height: 0; margin: 0; padding: 0; transition: all .2s ease-out; overflow: hidden; } .grid .footer-block__heading + .footer-block__details-content { visibility: visible; opacity: 1; height: auto; transition: all .2s ease-out; overflow: hidden; margin-bottom: 3rem; } }
Hi yes please it’s driving me bonkers trying to work it out.
I’ve resorted to trying to build new grids when there’s no need.
Yes can you please help me in the ticket here thanks
I’d prefer you offered to help with a solution here rather than wasting my time thanks
worked this out by targeting
.grid__item:first-child
in Custom CSS