Issues with product description area

[bartenderonduty]

Hi Themeco Team,

I’m having issues with the product description section in X. I chose to edit this section in Cornerstone and add headlines and text elements. Now when you hover over the section and attempt to scroll, the page gets stuck and for some reason there’s a scroll bar in the container.

Can you recommend a fix for this?

Thank you.

[friech]

Hi @bartenderonduty,

Would you mind providing us a direct page URL where we can see the issue? There are a lot of sites associated with your account.

For now, try clearing all your caching plugins and browser’s cache.

Thank you,

[bartenderonduty]

I’m not using caching plugins and I just cleared my browser cache, neither fixed the problem. Thank you for taking a look. Below is a link to the specific page with the issue.

[ruenel]

Hello @bartenderonduty,

Thanks for writing in!

The Product Description tab has a padding by default as shown in the image below:

If you want to reduce the padding, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-tab-content .x-tab-pane {
    padding: 4% 2% 0 2%;
}

Feel free to adjust the left and right padding in the code above. Meanwhile, the scrollbar is the result of your Flexbox options in the row settings. Please disable the Global Container, set a 100% width and align it to “Start” both horizontally and vertically.

Hope this helps. Please let us know how it goes.

[bartenderonduty]

Thank you for the response. I implemented your suggestions and they did not appear to correct the issue. Would you mind taking another look?

[ruenel]

Hello @bartenderonduty,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thanks.

[bartenderonduty]

No problem, please see below. Thank you!

[christopher]

Hi @bartenderonduty,

Thank you for providing us with the login information. I went to the product in question and clicked on the ROW layout magnifying glass icon and after that clicked the customize tab and added the CSS code below into Element CSS:

$el > .x-row-inner {
  margin: 0;
}

$el represents the current row. You may need to do the same for other rows that you might want to add.

The reason behind the code above is that the inner-row part of the Row element has an auto-generated margin calculation that does not sit well inside the description box of Woocommece. We can not turn off that calculation as it is needed for the normal use of the content builder. The code above just sets the margin to 0 and overrides the auto-calculation.

You can learn more about the Element CSS feature here.

Thank you.

[bartenderonduty]

Perfect, looks great! Thank you for your help.

[christian]

You’re welcome. Glad we’re able to hlep.