I need help with Broklyn theme to set product description across whole width

Highlighted
New Member
4 0 0

Hello everyone.

This is my website in question: https://outofmarbles.com/products/the-two-x-wheels

 

as you can see, I figured out how to place description across the whole width, but then it breaks the buy button and my "infinite product options" app.

 

This is how the code looks like, I feel like im close, but Im just not knowledgable enough in HTML

    <div class="grid product-single">
      <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">

        {% if section.settings.image_layout == "stacked" %}
          {% comment %}
            Default or stacked layout
          {% endcomment %}

          {% comment %}
            We need to figure out the max width we want the image to be on the page
            based on the aspect ratio of the image and based on the size of the
            image.
          {% endcomment %}
          <div class="product-single__photos">
            {% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}
            {% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}

            {% comment %}
              Display current variant image
            {% endcomment %}
            <div class="product-single__photo--flex-wrapper">
              <div class="product-single__photo--flex">
                {% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
                <div id="{{ wrapper_id }}" class="product-single__photo--container">
                  <div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;">
                    {% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="product-single__photo lazyload {{ img_id_class }}"
                      src="{{ featured_image | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[180, 360, 590, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                      data-aspectratio="{{ featured_image.aspect_ratio }}"
                      data-sizes="auto"
                      {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
                      data-image-id="{{ featured_image.id }}"
                      alt="{{ featured_image.alt | escape }}">

                    <noscript>
                      <img class="product-single__photo"
                        src="{{ featured_image | img_url: 'master' }}"
                        {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
                        alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
                    </noscript>
                  </div>
                </div>
              </div>
            </div>

            {% comment %}
              Display rest of product images, not repeating the featured one
            {% endcomment %}
            {% for image in product.images %}
              {% unless image contains featured_image %}

                {% comment %}
                  We need to figure out the max width we want the image to be on the page
                  based on the aspect ratio of the image and based on the size of the
                  image.
                {% endcomment %}
                {% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
                {% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}

                <div class="product-single__photo--flex-wrapper">
                  <div class="product-single__photo--flex">
                    {% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
                    <div id="{{ wrapper_id }}" class="product-single__photo--container">
                      <div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                        {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                        <img class="product-single__photo lazyload {{ img_id_class }}"
                          src="{{ image | img_url: '300x' }}"
                          data-src="{{ img_url }}"
                          data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                          data-aspectratio="{{ image.aspect_ratio }}"
                          data-sizes="auto"
                          {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %}
                          data-image-id="{{ image.id }}"
                          alt="{{ image.alt | escape }}">

                        <noscript>
                          <img class="product-single__photo" src="{{ image.src | img_url: 'master' }}"
                            {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %}
                            alt="{{ image.alt | escape }}"
                            data-image-id="{{ image.id }}">
                        </noscript>
                      </div>
                    </div>
                  </div>
                </div>
              {% endunless %}
            {% endfor %}

          </div>

        {% else %}
          {% comment %}
            Thumbnails layout
          {% endcomment %}

          <div class="product-thumbnail__photos product-single__photos">

            {% comment %}
              We need to figure out the max width we want the image to be on the page
              based on the aspect ratio of the image and based on the size of the
              image.
            {% endcomment %}
            {% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}
            {% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}

            {% comment %}
              Display current variant image
            {% endcomment %}
            <div class="product-single__photo--flex-wrapper">
              <div class="product-single__photo--flex">
                {% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
                <div id="{{ wrapper_id }}" class="product-single__photo--container product-single__photo--container-thumb">
                  <div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;">
                    {% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="product-single__photo lazyload {{ img_id_class }}"
                      src="{{ featured_image | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[180, 360, 590, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                      data-aspectratio="{{ featured_image.aspect_ratio }}"
                      data-sizes="auto"
                      {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
                      data-image-id="{{ featured_image.id }}"
                      alt="{{ featured_image.alt | escape }}">

                    <noscript>
                      <img class="product-single__photo"
                        src="{{ featured_image | img_url: 'master' }}"
                        {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
                        alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
                    </noscript>
                  </div>
                </div>
              </div>
            </div>

            {% comment %}
              Populate rest of product images with display = none, not repeating the featured one
            {% endcomment %}
            {% for image in product.images %}
              {% unless image contains featured_image %}

                {% comment %}
                  We need to figure out the max width we want the image to be on the page
                  based on the aspect ratio of the image and based on the size of the
                  image.
                {% endcomment %}
                {% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
                {% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}

                <div class="product-single__photo--flex-wrapper">
                  <div class="product-single__photo--flex">
                    {% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
                    <div id="{{ wrapper_id }}" class="product-single__photo--container product-single__photo--container-thumb hide">
                      <div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                        {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                        <img class="product-single__photo lazyload {{ img_id_class }}"
                          src="{{ image | img_url: '300x' }}"
                          data-src="{{ img_url }}"
                          data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                          data-aspectratio="{{ image.aspect_ratio }}"
                          data-sizes="auto"
                          {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %}
                          data-image-id="{{ image.id }}"
                          alt="{{ image.alt | escape }}">

                        <noscript>
                          <img class="product-single__photo" src="{{ image.src | img_url: 'master' }}"
                            {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %}
                            alt="{{ image.alt | escape }}"
                            data-image-id="{{ image.id }}">
                        </noscript>
                      </div>
                    </div>
                  </div>
                </div>
              {% endunless %}
            {% endfor %}

            {% comment %}
              Display thumbnails
            {% endcomment %}
            <ul class="product-single__thumbnails small--hide grid-uniform" id="ProductThumbs">
              {% for image in product.images %}
                {% if product.images.size > 1 %}
                  <li class="grid__item medium--one-third large--one-quarter product-single__photo-wrapper">
                    <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail {% if image contains featured_image %} active-thumb{% endif %}">
                      <img class="product-single__thumb" src="{{ image.src | img_url: '150x' }}" alt="{{ image.alt | escape }}">
                    </a>
                  </li>
                {% endif %}
              {% endfor %}
            </ul>
          
          </div>
        {% endif %}
      </div>

      <div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
        <div class="product-single__meta">
          {% if section.settings.product_vendor_enable %}
            <h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
          {% endif %}

          <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}


          <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            {% comment %}
              Optionally show the 'compare at' or original price of the product.
            {% endcomment %}
            {% include 'product-price', variant: current_variant %}

            {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
              <div class="product-single__policies rte">
                {%- if shop.taxes_included -%}
                  {{ 'products.general.include_taxes' | t }}
                {%- endif -%}
                {%- if shop.shipping_policy.body != blank -%}
                  {{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                {%- endif -%}
              </div>
            {%- endif -%}

            <hr class="hr--small">

            <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

            {% capture "form_classes" %}
              product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}
            {%- endcapture %}

            {% capture "form_id" %}AddToCartForm--{{ section.id }}{%- endcapture %}

            {% form 'product', product, class:form_classes, id:form_id, data-product-form: '' %}
              {% unless product.has_only_default_variant %}
                {% for option in product.options_with_values %}
                  <div class="radio-wrapper js product-form__item">
                    <label class="single-option-radio__label"
                      for="ProductSelect-option-{{ forloop.index0 }}">
                      {{ option.name | escape }}
                    </label>
                    {% if section.settings.product_selector == 'radio' %}
                      <fieldset class="single-option-radio"
                        id="ProductSelect-option-{{ forloop.index0 }}">
                        {% assign option_index = forloop.index %}
                        {% for value in option.values %}
                          {% assign variant_label_state = true %}
                          {% if product.options.size == 1 %}
                            {% unless product.variants[forloop.index0].available  %}
                              {% assign variant_label_state = false %}
                            {% endunless %}
                          {% endif %}
                          <input type="radio"
                            {% if option.selected_value == value %} checked="checked"{% endif %}
                            {% unless variant_label_state %} disabled="disabled"{% endunless %}
                            value="{{ value | escape }}"
                            data-index="option{{ option_index }}"
                            name="option{{ option.position }}"
                            class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
                            id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
                          <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
                        {% endfor %}
                      </fieldset>
                    {% else %}
                      <select class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                        {% for value in option.values %}
                          <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
                        {% endfor %}
                      </select>
                    {% endif %}
                  </div>
                {% endfor %}
              {% endunless %}

              <select name="id" id="ProductSelect" class="product-single__variants no-js">
                {% for variant in product.variants %}
                  {% if variant.available %}
                    <option {% if variant == product.selected_or_first_available_variant %}
                      selected="selected" {% endif %}
                      data-sku="{{ variant.sku }}"
                      value="{{ variant.id }}">
                      {{ variant.title }} - {{ variant.price | money_with_currency }}
                    </option>
                  {% else %}
                    <option disabled="disabled">
                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                    </option>
                  {% endif %}
                {% endfor %}
              </select>

              {% if section.settings.quantity_enabled %}
              <div class="product-single__quantity">
                <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
                <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
              </div>
              {% endif %}

              <div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
                <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
                  <span class="btn__text">
                    {% if current_variant.available %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% else %}
                      {{ 'products.product.sold_out' | t }}
                    {% endif %}
                  </span>
                </button>
                {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
                {% endif %}
              </div>
            {% endform %}

          </div>


        </div>
      </div>
    </div>
  <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>
0 Likes
Highlighted
Globetrotter
725 67 91

I can help you, only issue is if we make text full width without overlapping then there is some white space left after your product image, if it is ok then it can be done. 

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
New Member
4 0 0

yes i would like that for sure. I have tidied up the right side where you pick options, so its much shorter now, so gap would be very small.
this product now still has the issue because there are too few pictures: https://outofmarbles.com/products/the-double-screw-assembled

0 Likes
Highlighted
Globetrotter
725 67 91

@Bizilux wrote:

yes i would like that for sure. I have tidied up the right side where you pick options, so its much shorter now, so gap would be very small.
this product now still has the issue because there are too few pictures: https://outofmarbles.com/products/the-double-screw-assembled


can you add me to your staff? there are few settings which we need to do

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
New Member
4 0 0

Okay thanks for your help, do we go somewhere where we can live chat a bit? do you have discord?

0 Likes
Highlighted
Globetrotter
725 67 91

@Bizilux wrote:

Okay thanks for your help, do we go somewhere where we can live chat a bit? do you have discord?


you can email me, we can have live chat

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes