Continuation of #369818

The display crashed again at the same location.

The position of each title has been moved to the upper left instead of directly to the side.
Line breaks are no longer used in the main text. Image attached

What I did was make some additional modifications to the custom CSS code that was previously supported.

#tab-additional_information .shop_attributes td {
text-align: left;
padding: 2em;
white-space: pre-line;
}

#tab-additional_information .shop_attributes tr {
display: block;
}

However, as shown in the image, this increases the margin between the title and the main text and the margin below the main text, resulting in poor balance.

What I want to do is maintain the balance before modification and only perform line breaks.

Please tell me how

Attachments:

You must be logged in to view attached files.

Hello,

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

#tab-additional_information .shop_attributes td {
    text-align: left !important;
    padding: 1.5em 2em !important; 
    white-space: pre-line !important; 
}

#tab-additional_information .shop_attributes tr {
    display: table-row !important; 
}

#tab-additional_information .shop_attributes th {
    text-align: left;
    padding-right: 1em; 
}

#tab-additional_information .shop_attributes {
    border-collapse: collapse !important; 
}

#tab-additional_information .shop_attributes tr td, 
#tab-additional_information .shop_attributes tr th {
    vertical-align: top; 
    padding-bottom: 0.5em; 
}

You can change the code as per your requirements.

Best Regards.

Thank you for contacting us.
When I tried it, the space between the title and the body of the text seemed wide and unbalanced.

I’m not an expert, but if this problem can’t be solved because the title is placed at the top left, wouldn’t it be possible to solve it by displaying the text next to the title like before? ?

Please check the changed status from the URL.

Thank you for your understanding.

Hello,

Please remove this code from the previous code.

#tab-additional_information .shop_attributes tr {
    display: table-row !important; 
}

And add the following, to do this you can show the text in front of the label.

#tab-additional_information .shop_attributes tr {
        display: flex !important;
    }

Best Regards.

After fixing the problem:

For URL pages, there are the following items. From above

メーカー
内容詳細
使用方法*
注意事項
成分*
副作用*
発送国*
発送に関する注意事項*

*Items are now displayed on the right.
I would like it to be left aligned like before.

One more point.
With this correction, the title is on the left and the main text is on the right, but their centers are shifted and the main text appears to be one or two rows down.

Please correct it.

Hello,

Unfortunately, it is not possible. HTML structure does not allow solving it by custom CSS. Such modification requires complicated Woocommerce code customization which is not covered by our support.

Best Regards.

What do you mean.

Up until now, I had been able to resolve the issue with your company’s support each time, but after an update, the display started to break down.

I just want to go back to the display that was possible before.

Please don’t give up.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards.

thank you.

Originally, it was displayed properly to my satisfaction.
The display has been corrupted due to the update, so I would like it to be restored.

I remember that the previous display was horizontal as shown below.

“Title” “Text”

If the above becomes difficult, you can change the title to the top left as shown below.

“title”
“Text”

I would like to return to a well-balanced display without too many blank spaces.

thank you.

Hello,

Now check back your site and check the issue.

Best Regards.

thank you for your reply.

Thank you for the correction.
I think there is a good balance between the title and the text.
Line breaks are not reflected.

The code seems to have been modified in a more complex manner than before I asked the question here, but this is the same result as when I recognized the problem.

A continuing problem is that line breaks are not reflected.
Previously, line breaks were reflected.

Hello,

Can you please share some screenshots for better understanding where you want to add line breaks.

Best Regards

send the image

Attachments:

You must be logged in to view attached files.

Hello,

Now check back your site and check the issue. I have added the following custom css in theme settings > custom css.

.shop_attributes :is(.wd-attr-name,.wd-attr-term) {
 white-space: pre-line !important;
}

Best Regards.

thank you.
The line breaks have been reflected, but the balance looks worse than before.
However, it may be difficult to make a simple comparison because previously the title and text were lined up parallel to each other.

Attach the image.
Is it difficult to make [not same] the same height as [same]?

thank you.

Attachments:

You must be logged in to view attached files.

Hello,

Now check back your site and check the issue.

Best Regards.

thank you.
it is perfect.
solved.
Thank you very much for your support until the end.

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts