How can I achieve even variant spacing with flexbox?

Hey there,

I’ve made a post about this earlier but i think I need to clarify a little.

I would like my variants to be spaced out evenly like the red rectangles.

The best option I’ve found would be using flexbox and using the spaced-evenly property.

Sadly I can not fully get it to work. The reason Im trying to do it like that, is that, if there is only 1 variant it still spams over 100% when there are 2 it should be 50/50 and with three etc too. I just want it do be spaced evenly over 100% width. Its driving me nuts. If anyone can help me, it would be greatly appreciated!

Store: click me

Password: siesoh1

Hi,

Please add the code below to assets/theme.css or custom.css file.

@media only screen and (min-width: 770px) {
  .variant-input-wrap {
    background-color: #ffffff;
  }
  .variant-wrapper--dropdown {
    width: 100%;
    display: table-cell !important;
    white-space: nowrap;
  }
}
@media only screen and (min-width: 770px) and (max-width: 999px) {
  input, select, textarea {
    width: 12vw;
    background-color: whitesmoke !important;
  }
}
@media only screen and (min-width: 1000px) and (max-width: 1499px) {
  input, select, textarea {
    width: 13vw;
    background-color: whitesmoke !important;
  }
}
@media only screen and (min-width: 1500px) {
  input, select, textarea {
    width: 14vw;
    background-color: whitesmoke !important;
  }
}

The product page will be perform better if you can modify the product page liquid file (such as product.liquid, product-template.liquid, or main-product.liquid). However, without working on liquid file, the modification is very limited.

Hope it helps.

Thanks.

I can paste the corresponding file if youd like me to

product-template.liquid

{%- liquid
  assign current_variant = product.selected_or_first_available_variant

  unless thumbnail_position
    assign thumbnail_position = 'beside'
  endunless

  assign product_zoom_size = '1800x1800'
  assign product_image_size = '620x'

  case image_container_width
    when 'small'
      assign product_image_width = 'medium-up--two-fifths'
      assign product_description_width = 'medium-up--three-fifths'
      assign product_image_size = '480x'
    when 'medium'
      assign product_image_width = 'medium-up--one-half'
      assign product_description_width = 'medium-up--one-half'
      assign product_image_size = '620x'
    when 'large'
      assign product_image_width = 'medium-up--three-fifths'
      assign product_description_width = 'medium-up--two-fifths'
      assign product_image_size = '740x'
  endcase

  assign product_img_structure = product.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
-%}

{%- liquid
  assign connect_to_sizechart = false

  for block in section.blocks
    if block.type == 'size_chart'
      assign sizechart_index = forloop.index0
      assign next_block_index = sizechart_index | plus: 1
      assign variant_block = section.blocks[next_block_index]

      if variant_block.type == 'variant_picker' and variant_block.settings.picker_type == 'button' and product.has_only_default_variant == false
        for option in product.options_with_values
          assign size_trigger = 'products.general.size_trigger' | t | downcase
          assign downcased_option = option.name | downcase

          if downcased_option contains size_trigger
            assign connect_to_sizechart = true
          endif
        endfor
      endif

    endif
  endfor
-%}

  {%- render 'product-template-variables', product: product, current_variant: current_variant -%}

  

    

      

        {%- if image_position == 'left' -%}
          

            {%- render 'product-images',
              section_id: section_id,
              product: product,
              isModal: isModal,
              image_position: image_position,
              product_zoom_enable: product_zoom_enable,
              product_zoom_size: product_zoom_size,
              product_image_size: product_image_size,
              thumbnail_arrows: thumbnail_arrows,
              thumbnail_position: thumbnail_position,
              video_looping: video_looping,
              video_style: video_style
            -%}
          

        {%- endif -%}

        

          

            

              {%- if settings.show_breadcrumbs and isModal != true -%}
                {%- render 'breadcrumbs' -%}
              {%- endif -%}

              {%- if settings.vendor_enable -%}
                

                  {%- assign vendor_handle = product.vendor | handleize -%}
                  {%- if collections[vendor_handle] != empty -%}
                    
                      {{ collections[vendor_handle].title }}
                    
                  {%- else -%}
                    {{ product.vendor | link_to_vendor }}
                  {%- endif -%}
                

              {%- endif -%}

              {%- if isModal -%}
                

                  {{ product.title }}
                

              {%- else -%}
                # 
                  {%- unless product.empty? -%}
                    {{ product.title }}
                  {%- else -%}
                    {{ 'home_page.onboarding.product_title' | t }}
                  {%- endunless -%}
                
              {%- endif -%}

              {%- if sku_enable -%}
                

                  {%- if current_variant.sku -%}
                    {{ current_variant.sku }}
                  {%- endif -%}
                

              {%- endif -%}
            

            
              {%- capture form_id -%}AddToCartForm-{{ section_id }}-{{ product.id }}{%- endcapture -%}
              {%- for block in blocks -%}
                {%- case block.type -%}
                  {%- when '@app' -%}
                    {% render block %}
                  {%- when 'separator' -%}
                    

---

                  {%- when 'text' -%}
                    
                      {{ block.settings.text }}
                    

                  {%- when 'tab' -%}
                    {% assign tab_id = block.id | append: product.id %}
                    {% capture tab_content %}
                      {{ block.settings.content }}
                      {{ block.settings.page.content }}
                    {% endcapture %}
                    {% unless tab_content == blank and block.settings.title == blank %}
                      
                        {%- render 'tab', id: tab_id, title: block.settings.title, content: tab_content -%}
                      

                    {% endunless %}
                  {%- when 'contact' -%}
                    
                      {% assign tab_id = block.id | append: product.id %}
                      {%- render 'tab-contact', id: tab_id, block: block -%}
                    

                  {%- when 'description' -%}
                    
                      {%- assign id = block.id | append: product.id -%}
                      {%- render 'product-description', id: id, product: product, is_tab: block.settings.is_tab -%}
                    

                  {%- when 'price' -%}
                    
                      {%- assign hide_sale_price = true -%}
                      {%- if product.compare_at_price_max > product.price -%}
                        {%- if current_variant.compare_at_price > current_variant.price -%}
                          {%- assign hide_sale_price = false -%}
                        {%- endif -%}
                        
                            {{ 'products.general.regular_price' | t }}
                        
                        
                          
                            {%- if current_variant.compare_at_price > current_variant.price -%}
                              {{ current_variant.compare_at_price | money }}
                            {%- endif -%}
                          
                        
                        {{ 'products.general.sale_price' | t }}
                      {%- else -%}
                        {{ 'products.general.regular_price' | t }}
                      {%- endif -%}

                      
                        {%- unless product.empty? -%}
                          {{ current_variant.price | money }}
                        {%- else -%}
                          {{ 1999 | money }}
                        {%- endunless -%}
                      

                      {%- if settings.product_save_amount -%}
                        {%- if settings.product_save_type == 'dollar' -%}
                          {%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | money }}{%- endcapture -%}
                        {%- else -%}
                          {%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{%- endcapture -%}
                        {%- endif -%}
                        
                          {%- unless hide_sale_price -%}
                            {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
                          {%- endunless -%}
                        
                      {%- endif -%}

                      

                        {%- capture unit_price_base_unit -%}
                          
                            {%- if current_variant.unit_price_measurement -%}
                              {%- if current_variant.unit_price_measurement.reference_value != 1 -%}
                                {{ current_variant.unit_price_measurement.reference_value }}
                              {%- endif -%}
                              {{ current_variant.unit_price_measurement.reference_unit }}
                            {%- endif -%}
                          
                        {%- endcapture -%}

                        {{ current_variant.unit_price | money }}/{{ unit_price_base_unit }}
                      

                      {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
                        
                          {%- if shop.taxes_included -%}
                            {{ 'products.product.include_taxes' | t }}
                          {%- endif -%}
                          {%- if shop.shipping_policy.body != blank -%}
                            {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                          {%- endif -%}
                        

                      {%- endif -%}
                    

                  {%- when 'quantity_selector' -%}
                    
                      

                        {% assign qty_id = section_id | append: product.id %}
                        
                        {%- render 'quantity-input', form_id: form_id, id: qty_id, qty: 1, min: 1 -%}
                      

                    

                  {%- when 'size_chart' -%}
                    {% if connect_to_sizechart == false %}
                      {%- capture size_chart_title -%}
                        {{ 'products.general.size_chart' | t }}
                      {%- endcapture -%}

                      

                        {%- render
                          'tool-tip-trigger',
                          title: size_chart_title,
                          content: block.settings.size_chart.content,
                          context: 'size-chart'
                        -%}
                        {% style %}
                          tool-tip-trigger {
                            text-transform: uppercase;
                          }
                        {% endstyle %}
                      

                    {% endif %}
                  {%- when 'variant_picker' -%}
                    
                      {%- unless product.has_only_default_variant -%}
                        {%- for option in product.options_with_values -%}
                          {%- liquid
                            if block.settings.color_swatches
                              assign is_color = false
                              assign color_option_index = 0
                              assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase
                              assign color_option_index = forloop.index0
                              assign downcased_option = option.name | downcase
                              if downcased_option contains swatch_trigger
                                assign is_color = true
                              elsif swatch_trigger == 'color' and downcased_option contains 'colour'
                                assign is_color = true
                              endif
                            endif
                          -%}

                          {%- if block.settings.picker_type == 'button' -%}
                            {%- render 'variant-button',
                              block: block,
                              product: product,
                              form_id: form_id,
                              section_id: section_id,
                              option: option,
                              forloop: forloop,
                              variant_labels: block.settings.variant_labels,
                              is_color: is_color,
                              color_option_index: color_option_index,
                              connect_to_sizechart: connect_to_sizechart,
                              sizechart_index: sizechart_index
                            -%}
                          {%- else -%}
                            {%- render 'variant-dropdown',
                              product: product,
                              form_id: form_id,
                              section_id: section_id,
                              option: option,
                              forloop: forloop,
                              variant_labels: block.settings.variant_labels
                            -%}
                          {%- endif -%}
                        {%- endfor -%}
                      {%- endunless -%}
                    

                  {%- when 'buy_buttons' -%}
                    
                      {%- unless product.empty? -%}
                        

                          {%- render 'product-form',
                            form_id: form_id,
                            product: product,
                            show_dynamic_checkout: block.settings.show_dynamic_checkout,
                            current_variant: current_variant
                          -%}
                        

                      {%- endunless -%}

                      {%- if block.settings.surface_pickup_enable -%}
                        

                      {%- endif -%}
                    

                  {%- when 'sales_point' -%}
                    {%- unless block.settings.text == blank -%}
                      
                        

                          - {% case block.settings.icon %}
                                  {% when 'checkmark' %} 
                                  {% when 'gift' %} 
                                  {% when 'globe' %} 
                                  {% when 'heart' %} 
                                  {% when 'leaf' %} 
                                  {% when 'lock' %} 
                                  {% when 'package' %} 
                                  {% when 'phone' %} 
                                  {% when 'ribbon' %} 
                                  {% when 'shield' %} 
                                  {% when 'tag' %} 
                                  {% when 'truck' %} 
                                {% endcase %}
                                {{ block.settings.text }}
                            
                          
                        

                      

                    {%- endunless -%}
                  {%- when 'inventory_status' -%}
                    {%- render 'product-inventory', product: product, current_variant: current_variant, block: block -%}
                  {%- when 'share' -%}
                    
                      {%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}
                    

                  {%- when 'trust_badge' -%}
                    
                      

                        

                          {%- assign img_url = block.settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                          
                          
                        

                      

                    

                  {%- when 'custom' -%}
                    
                      {{ block.settings.code }}
                    

                {%- endcase -%}
              {%- else -%}
                
                  

                

              {%- endfor -%}
            

          

        

        {%- unless image_position == 'left' -%}
          
            {%- render 'product-images',
              section_id: section_id,
              product: product,
              isModal: isModal,
              image_position: image_position,
              product_zoom_enable: product_zoom_enable,
              product_zoom_size: product_zoom_size,
              product_image_size: product_image_size,
              thumbnail_arrows: thumbnail_arrows,
              thumbnail_position: thumbnail_position,
              video_looping: video_looping,
              video_style: video_style
            -%}
          

        {%- endunless -%}
      

    

  

products-form.liquid ..its not much use this one tho

{%- form 'product', product, id: form_id, class: 'product-single__form' -%}

  {%- liquid
    assign enable_dynamic_buttons = false
    if show_dynamic_checkout and template != 'product.preorder'
      assign enable_dynamic_buttons = true
    endif
  -%}

  {%- if enable_dynamic_buttons -%}
    
  {%- endif -%}

    {%- liquid
      assign default_text = 'products.product.add_to_cart' | t
      assign button_text = 'products.product.add_to_cart' | t
      if template contains 'preorder'
        assign default_text = 'products.product.preorder' | t
        assign button_text = 'products.product.preorder' | t
      endif
      unless current_variant.available
        assign button_text = 'products.product.sold_out' | t
      endunless
    -%}

    

    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}

  {%- if enable_dynamic_buttons -%}
    

  {%- endif -%}

  {{ form | payment_terms }}

  

  
  {%- if product.options.size > 1 -%}
    
  {%- endif -%}
{%- endform -%}