Need Help Adjusting Collection Code For Mobile- Removing Collection Description- Leaving Just Image

[Katstormphoto]

I need assistance rewriting this code section so that the image appears first, and the description second. I also need it to be mobile-friendly with only the image appearing on mobile, not the description.

                  <div class="collection-img-wrap">
              {%- if section.settings.collection_info_enable -%} 
                <div class="collection-info">
{%- if section.settings.collection_desc_enable -%}
                <div class="collection-description">
                  {% if collection.description != '' %}
                  {{ collection.description }}
                  {% else %}
                  <p>{{ section.settings.collection_desc | truncate: 190 }}</p>
                  {% endif %}
                </div>                
              {%- endif -%}
                {%- if section.settings.collection_image_enable -%}
                <div class="collection-image">
                  {% if collection.image %}
                    {%- if collection.image != blank -%}
                      {{ collection.image | image_url: width: 800 | image_tag:
                        loading: 'lazy',
                        width: collection.image.width,
                        height: collection.image.height,
                        class: "img-fluid lazyload",
                        alt: collection.image.alt | escape }}
                    {%- else -%}
                    {{ 'hero-apparel-1' | placeholder_svg_tag }}
                    {%- endif -%}
                  {% else %}
                  {%- if section.settings.collection_image != blank -%}
                      {{ section.settings.collection_image | image_url: width: 800 | image_tag:
                        loading: 'lazy',
                        width: section.settings.collection_image.width,
                        height: section.settings.collection_image.height,
                        class: "img-fluid lazyload",
                        alt: section.settings.collection_image.alt | escape }}
                    {%- else -%}
                    {{ 'hero-apparel-1' | placeholder_svg_tag }}
                    {%- endif -%}
                  {% endif %}
                </div>
                {%- endif -%}
                {%- endif -%}
              </div>               
            </div>

[ReturnPrime]

Hi @Katstormphoto ,

To modify the code so that the image appears first, followed by the description, and to ensure it is mobile-friendly (only displaying the image on mobile), follow these steps:

Rearrange the Code: Move the image code above the description code.
Use CSS Media Queries: Hide the description on mobile screens.
Here’s the revised code:

liquid

Copy
<div class="collection-img-wrap">
{%- if section.settings.collection_info_enable -%}

{%- if section.settings.collection_image_enable -%}
<div class="collection-image">
{% if collection.image %}
{%- if collection.image != blank -%}
{{ collection.image | image_url: width: 800 | image_tag:
loading: 'lazy',
width: collection.image.width,
height: collection.image.height,
class: "img-fluid lazyload",
alt: collection.image.alt | escape }}
{%- else -%}
{{ 'hero-apparel-1' | placeholder_svg_tag }}
{%- endif -%}
{% else %}
{%- if section.settings.collection_image != blank -%}
{{ section.settings.collection_image | image_url: width: 800 | image_tag:
loading: 'lazy',
width: section.settings.collection_image.width,
height: section.settings.collection_image.height,
class: "img-fluid lazyload",
alt: section.settings.collection_image.alt | escape }}
{%- else -%}
{{ 'hero-apparel-1' | placeholder_svg_tag }}
{%- endif -%}
{% endif %}
</div>
{%- endif -%}

{%- if section.settings.collection_desc_enable -%}
<div class="collection-description">
{% if collection.description != '' %}
{{ collection.description }}
{% else %}
<p>{{ section.settings.collection_desc | truncate: 190 }}</p>
{% endif %}
</div>
{%- endif -%}

{%- endif -%}
</div>
Mobile-Friendly CSS
To hide the description on mobile devices, apply the following CSS:

css

Copy
/* Hide description on mobile */
@media only screen and (max-width: 767px) {
.collection-description {
display: none;
}
}

[Katstormphoto]

On desktop, I need the image and description to be on the same line. This code just places the description below the image.