Brooklyn theme: Moving product descriptions under images?

[Alan10]

Hey,

How can I move product descriptions directly under product images?

Thank You! 

[phenixwars]

---

@Hamza33 wrote:

Hello, many thanks it work perfectly.

Is it possible to keep the text within a certain limit in terms of width?

I don't want full width - im slowly picking up my coding skills once again.

Thank you.

i have found a fix.

Take this section and place with at around line 207

<div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>

Place within this div class (line 12), towards the very end of the div class

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

Bit of context - this is the end of the div class which I have bolded and underlined. Place within here above the "grid_item product-single__meta--wrapper class.

          </div>
        {% endif %}
         <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>
      </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 %}

I hope this helps!

---

Hi thanks for this code. It works well on desktop but on mobile what it does is it stacks the description on top of the Title and Pricing/Cart info. Pasting the entire product title and pricing code inside the div where the description was placed near line 207 didn't work.

Does anyone have any idea how to make it stack correctly on mobile? 

Also I didn't really understand the code instructions above that mention line 12. If I look at line 12 that is the same line of code I have but you don't specify clearly what we're supposed to do there. Maybe that's what I'm missing.

Thanks in advance!

[phenixwars]

I retract my comment... I was able to solve it with the first suggested fix on this forum post. Just put the description outside of the div that contains the whole page content basically. 

[Robindjeb]

Soooooo many thanks Hamza !!! It worked perfectly well, both on desktop and mobile ! Thanks again !

[chek-tech]

Similar to Hamza's fix and what phenixwars suggested but add 'grid__item' to the 'product-single__description' div to make it full width eg....

<div class="grid__item product-single__description rte" itemprop="description">
{{ product.description }}
</div>

So the final code would look like...

    <div class="grid product-single">
      <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
        <div id="ProductMediaGroup-{{ section.id }}" class="product-single__media-group-wrapper" data-product-single-media-group-wrapper>....</div>
      <div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">......</div>
      <div class="grid__item product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>
    </div>