How to make product description container wider?

[Searlas10]

Hi! I want to make product page looks like in attached screenshot. I tried to edit theme.css and product.tpl files, but I couldn't manage with that problem. 

 

In the browser I've moved div class="tabs" after div class="row" and it worked, but I don't know how to do that in theme files. 

 

What should I do?

 

I've seen this tutorial https://mypresta.eu/en/art/prestashop-16/product-tabs.html but I think that it won't work fine with version 1.7. 

 

 

 

Prestashop version:1.7.1.1

theme:classic

Edited June 15, 2017 by Searlas10 (see edit history)

[BalzoT]

Before starting to make changes to theme you should turn off the cache of Prestashop and force recompile on the changes of the tpl files.

 

There is a chance that your changes are no the correct files but these files are cached so they are not loaded on the Frontend!

[Searlas10]

Thanks for reply BalzoT. After every change in files I've cleared cache and i've seen changes but it wasn't what i expected.

Edited June 14, 2017 by Searlas10 (see edit history)

[Searlas10]

I've managed with that. 

 

Firstly look at this tutorial: https://mypresta.eu/en/art/prestashop-17/full-width-tabs-on-product-page.html

 

You should follow instruction from this tutorial.

 

But for me and few other people, it doesn't work fine because only text from description goes below tabs. 

 

If you faced the same problem you should move div class="tabs" also. Here is how your code should looks like:

 </div>

            {block name='hook_display_reassurance'}
              {hook h='displayReassurance'}
            {/block}

            
                
               
              
          </div>
        </div>
      </div>
    </div>
	{block name='product_tabs'}
              <div class="tabs">
	<ul class="nav nav-tabs">
                  {if $product.description}
                  <li class="nav-item">
                    <a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
                      {l s='Description' d='Shop.Theme.Catalog'}
                    </a>
                  </li>
                  {/if}
                  <li class="nav-item">
                    <a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details">
                      {l s='Product Details' d='Shop.Theme.Catalog'}
                    </a>
                  </li>
                  {if $product.attachments}
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#attachments">
                      {l s='Attachments' d='Shop.Theme.Catalog'}
                    </a>
                  </li>
                  {/if}
                  {foreach from=$product.extraContent item=extra key=extraKey}
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
                  </li>
                  {/foreach}
</ul>
 
    <div class="tab-content" id="tab-content">
     <div class="tab-pane fade in{if $product.description} active{/if}" id="description">
       {block name='product_description'}
         <div class="product-description">{$product.description nofilter}</div>
       {/block}
     </div>
 
     {block name='product_details'}
       {include file='catalog/_partials/product-details.tpl'}
     {/block}
     {block name='product_attachments'}
       {if $product.attachments}
        <div class="tab-pane fade in" id="attachments">
           <section class="product-attachments">
             <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
             {foreach from=$product.attachments item=attachment}
               <div class="attachment">
                 <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
                 <p>{$attachment.description}</p
                 <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
                   {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
                 </a>
               </div>
             {/foreach}
           </section>
         </div>
       {/if}
  {/block}
  </div>
            {/block}
     {foreach from=$product.extraContent item=extra key=extraKey}
     <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
         {$extra.content nofilter}
     </div>
	
     {/foreach}
    {block name='product_accessories'}
      {if $accessories}
        <section class="product-accessories clearfix">
          <h3 class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</h3>
          <div class="products">
            {foreach from=$accessories item="product_accessory"}
              {block name='product_miniature'}
                {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
              {/block}
            {/foreach}
          </div>
        </section>
      {/if}
    {/block}

    {block name='product_footer'}
      {hook h='displayFooterProduct' product=$product category=$category}
    {/block}

    {block name='product_images_modal'}
      {include file='catalog/_partials/product-images-modal.tpl'}
    {/block}

    {block name='page_footer_container'}
      <footer class="page-footer">
        {block name='page_footer'}
          <!-- Footer content -->
        {/block}
      </footer>
    {/block}
  </section>

{/block}

Edited June 21, 2017 by Searlas10 (see edit history)