Debut theme - change Product page layout

Solved
Highlighted
New Member
3 0 0

Hello, I am using Debut theme. On the Product page I would like to move the product description to the left and limit its length to 80 characters max. Now, it's just a one long column.   

product description (class="product-single__description rte"), product reviews (id="shopify-product-reviews" ) and social sharing buttons (section.settings.show_share_buttons). I wrapped all these elements into one <div class="product-tab">, and changed CSS a bit in theme.scss.liquid like this so I can see what I am working with (see the picture below):

 .product-tab {
display: block;
text-align: left;
border: 10px solid blue;
background-color: red;
}

1) I would like to move the red box to the left, under the product image

2) I would like to make the red box wider and shorter (up to 80 characters, now it's max. cca 38 characters).

How do I do it? I checked the suggested Tabs, but saw no result. Maybe changing the whole grid would help? (I wasn't successful with flexboxes either, but I might be doing something wrong)

Thanks

Ivana_Jones_0-1603148116991.png

 

0 Likes
Highlighted

Hi @Ivana_Jones

Do you mean you want to put the description on its own and have it full length below the add to cart and pictures? I added a picture for reference

 

Defineify_0-1603149392560.png

 

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes
Highlighted
New Member
3 0 0

@Defineify yes, this is how i would like to do the layout. but also make the text shorter - to the half of the screen width only, up to the word 'gumdrop-' or so. could you help me with it, please?

0 Likes
Highlighted

This is an accepted solution.

Hi @Ivana_Jones 

Move the description element to the outter divs, as shown in the picture.

If you want to make it half width of the element use width: 50%. If you want to make it in the middle, use margin auto. Code attached below

 

          <div class="product-single__description rte" style="width: 50%; margin: auto">
          {{ product.description }}
        </div>

 

 

Defineify_0-1603151093423.png

 

final result:

Defineify_1-1603151161018.png

 

Any other further edits would be more of a customization space, you would need to hire a developer. My email is below if you wish to speak.

 

 

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
Highlighted
New Member
3 0 0

it's working, thanks a lot!!! 

0 Likes