I need help,im trying to make one banner appear on a pc screen width and another appear on phone

Technical Q&A

Topic summary

A beginner coder is attempting to display different banners for desktop versus mobile screens in their Shopify theme.liquid file, but encountering errors.

The code appears to be AI-generated (via ChatGPT) and contains significant formatting issues:

  • Section settings are displaying in red (indicating syntax errors)
  • Large portions of the code are reversed/mirrored text (CSS and Liquid template code written backwards)
  • The JSON structure for banner sections appears malformed and incomplete

The intended functionality involves:

  • Two banner sections (“section-banner-v7” type) with identical content about “FitGear” fitness products
  • Media queries to control visibility based on screen width (1040px and 1400px breakpoints)
  • Adaptive image height settings with aspect ratio calculations

The user is seeking help identifying what’s wrong with the code and why it’s not functioning. The backwards text and structural errors suggest the AI-generated code may have been corrupted during copying/pasting or contains fundamental syntax problems that need correction before it can work properly.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

What am i doing wrong and why doesnt it work, iam fairly new to coding, and i used chat gpt for the most of it, the section settings part is all in red and iam trying to write this code into theme.liquid ,

thanks for the help in advance it means the world .

{%- assign sections_json = ‘{
“sections”: {
“156781f3-20c4-4abb-af65-12a42f0ffcaa”: {
“type”: “section-banner-v7”,
“settings”: {
“margin_top”: “”,
“margin_bottom”: “-25”,
“ena_container”: false,
“ena_margin_top”: false,
“select_pos”: “center”,
“title_banner”: “FitGear”,
“color_title”: “#7bae23”,
“content_banner”: “Elevate Your Workout and Achieve Your Fitness Goals!”,
“color_content_banner”: “#7bae23”,
“button_banner”: “READ MORE”,
“color_btn”: “#7bae23”,
“bg_btn”: “#ffffff”,
“color_btn_hover”: “#ffffff”,
“bg_btn_hover”: “#7bae23”,
“url_button”: “shopify://collections/fitness”,
“img_banner”: “shopify://shop_images/friends-fitness-training-together-outdoors-living-2021-08-26-17-34-48-utc.jpg”
}
},
“16372968643b5c4354”: {
“type”: “section-banner-v7”,
“settings”: {
“margin_top”: “”,
“margin_bottom”: “-25”,
“ena_container”: false,
“ena_margin_top”: false,
“select_pos”: “center”,
“title_banner”: “FitGear”,
“color_title”: “#7bae23”,
“content_banner”: “Elevate Your Workout and Achieve Your Fitness Goals!”,
“color_content_banner”: “#7bae23”,
“button_banner”: “READ MORE”,
“color_btn”: “#7bae23”,
“bg_btn”: “#ffffff”,
“color_btn_hover”: “#ffffff”,
“bg_btn_hover”: “#7bae23”,
“url_button”: “shopify://collections/fitness”,
“img_banner”: “shopify://shop_images/friends-fitness-training-together-outdoors-living-2021-08-26-17-34-48-utc.jpg”
}
}
},
“order”: [“156781f3-20c4-4abb-af65-12a42f0ffcaa”, “16372968643b5c4354”]
}’
| json
-%}

{%- if template == ‘theme’ -%}
{%- assign banner_section_ids = sections_json.order -%}
{%- for section_id in banner_section_ids -%}
{%- assign section = sections_json.sections[section_id] -%}
{%- if section.type == ‘section-banner-v7’
and section.settings.image_height == ‘adapt’
and section.settings.img_banner != blank
-%}
{%- style -%}
@media screen and (max-width: 1400px) {
#{{ section_id }}::before,
#{{ section_id }} .small-screen-visible::before {
padding-bottom: {{ 1 | divided_by: section.settings.img_banner.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
#{{ section_id }} .large-screen-visible::before {
display: none;
}
}

@media screen and (min-width: 1401px) {
#{{ section_id }}::before,
#{{ section_id }} .small-screen-visible::before {
display: none;
}
#{{ section_id }} .large-screen-visible::before {
padding-bottom: {{ 1 | divided_by: section.settings.img_banner.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%},