Change text body width on Venture Theme.

New Member
9 0 0

Hello,

On the Venture theme, I have changed the position of the body text of the product page under the thumbnail and the add to cart button. However it is in full large and I would like to reduce the width to about two third or 50%. I don't know where to go in the edit code to do this changement. Could you help me please ? 

 

0 Likes
Shopify Staff
Shopify Staff
317 30 51

Hi, Jim!

This is May from Shopify.

Nice work on changing the position of the body! Did you make this change by editing your theme code? If so, you’ll also want to edit your theme code in order to make changes to the width. Before proceeding with the edits, I highly recommend making a duplicate of your theme, in case of any unintended results. After you make a copy of your theme, you can follow the steps below!

  1. From your admin, go to ‘Settings > Online Store > Edit code’.

  2. Open up your ‘theme.scss.liquid’ file inside the ‘Assets’ folder.

  3. Search for a class called ‘rte’ by searching ‘.rte {‘. If you are using a Mac, you can press Command + F to search, or on Windows, press Control + F. You’ll want to look for this section of code:

  4. Below ‘margin-bottom: $gutter-site;’, add

    width: 50%;

    You can replace ‘50%’ with any number, depending on how wide you want the width to be. If you would like to center this section, you can add

    margin-left: auto; 
    margin-right: auto;

    So, your final code will look like

    .rte {
     @include clearfix();
     margin-bottom: $gutter-site;
     width: 50%;
     margin-left: auto;
     margin-right: auto;

     

  5. Click ‘Save’.

It is important to note that if you edit your ‘theme.scss.liquid’ file, you will not be able to roll back to older versions, therefore I strongly recommend making a copy of your theme. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since Venture is a theme made and supported by Shopify, our theme support may be able to look into making the change as well if your account is eligible!

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support


 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
9 0 0

Hello,

Thank you! It worked for computers but the problem is that it also has been applied for mobiles... Only for mobiles i would like the next to be full width. Is it possible to do that ?

0 Likes
Shopify Staff
Shopify Staff
317 30 51

Hi again, Jim!

That is a great question! I can definitely see why you would want to display the product description regularly on mobile version. You can make this change by going back to your ‘theme.scss.liquid’ file and find ‘.rte’ where you edited the code. The, you will want to wrap the added code around '@include media-query($medium-up)'

@include media-query($medium-up) {

//your additional code here

}

So your code will look like this:

If this isn't quite what you were after, let me know and we can continue with our support.

Kind Regards,

May

Shopify Support


 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes