How to fix product images lining up in a column on full screen desktop view?

Technical Q&A
1

Hello everyone,

I’m brand new to coding and such, so I personally have no clue what I’m doing. I purchased a theme I’m extremely satisfied with. However, I’m having some problems with the way images line up on my product page. On mobile, or when I minimize the window on desktop, my images line up as they should, in a carousel form. However, when in full screen mode on desktop, they form a column going down the length of the page, forming a large empty space on the margins of the screen. I have attached the gallery code below:

{%- assign initial_image_id = product.featured_image.id -%}
    {%- assign initial_image_index = 0 -%}
    {%- assign image_count = 0 -%}

    {%- capture slideshow_images -%}
      {%- for image in product.images -%}
        {%- if image.alt == 'featured' or image.alt == 'featured mobile' -%}
          {%- continue -%}
        {%- endif -%}

        {%- if image.id == product.selected_or_first_available_variant.image.id -%}
          {%- assign initial_image_index = image_count -%}
          {%- assign initial_image_id = image.id -%}
        {%- endif -%}

        {%- include 'image-size', sizes: '200,400,600,700,800,900,1000,1200,1400,1600', image: image -%}

        {%- assign is_video = false -%}

        {%- if image.alt contains 'youtube.com/embed' or image.alt contains 'player.vimeo.com' -%}
          {%- assign is_video = true -%}
        {%- endif -%}

        
          

            {% assign image_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

            

            

            {%- if is_video -%}
              
            {%- endif -%}

            
          

        

        {%- assign image_count = image_count | plus: 1 -%}
      {%- endfor -%}
    {%- endcapture -%}

    {%- if product.images.size > 0 -%}
      
        

        {%- if action_list_items != blank -%}
          

          {{ action_list_items }}
          

        {%- endif -%}

        {%- if image_count > 1 -%}
          {%- if section.settings.show_thumbnails -%}
            
              

                {%- for image in product.images -%}
                  {%- if image.alt == 'featured' or image.alt == 'featured mobile' -%}
                    {%- continue -%}
                  {%- endif -%}

                  {%- assign is_video = false -%}

                  {%- if image.alt contains 'youtube.com/embed' or image.alt contains 'player.vimeo.com' -%}
                    {%- assign is_video = true -%}
                  {%- endif -%}

                  
                    

                    {%- if is_video -%}
                      
                    {%- endif -%}
                  
                {%- endfor -%}
              

            

          {%- endif -%}

          
            

              {%- for image in product.images -%}
                {%- if image.alt == 'featured' or image.alt == 'featured mobile' -%}
                  {%- continue -%}
                {%- endif -%}

                
              {%- endfor -%}
            

          

        {%- endif -%}
        
        {%- capture flickity_options -%}
        {
          "prevNextButtons": false,
          "pageDots": {% if image_count > 1 %}true{% else %}false{% endif %},
          "adaptiveHeight": true,
          "wrapAround": false,
          "watchCSS": true,
          "dragThreshold": 8,
          "initialIndex": {{ initial_image_index }}
        }
        {%- endcapture -%}

        
          {{ slideshow_images }}
        

      

    {%- endif -%}

    {%- capture product_aside -%}

I need to somehow fix the issue, making the images always line up in carousel format, rather than forming a row when on a full screen desktop window. Any help is appreciated!