How to shorten product description text width – Baseline Theme

[MJ82]

Hello,

I would like to know how to make all text on product pages (the product descriptions) shorter in width.

I know that I could manually add line breaks in code but when I do that it looks great on desktop, but very strange on mobile view.

I would prefer to just add a code that can make the fixed width shorter so it looks correct on both desktop and mobile.

EDIT: Or sorry, maybe it's best to add a code that can make the entire right half of the product page shorter with a large white margin on the far right, so that the text lines and size table drop downs don't go right to the edge of the page on the right? Please see the current preview here: https://contrakidsmutiny.com/collections/new-arrivals/products/welcome-migrants-short-test 

[MJ82]

[deleted and moved above to original post]

[Made4uo-Ribe]

Hi @MJ82 

Do you mean like this?

If it is try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.js-enabled.accordian.mt-8 .rte {
    width: 50%;
}

• And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[MJ82]

Thank you for your reply – I just did that. I found the theme.css and copy and pasted this right at the very end (bottom), and saved. I refresh the front-end and I don't see the change. What could I be doing wrong? Thanks again

[MJ82]

Is there another code I can perhaps try? Thanks a lot for your help!

[MJ82]

I realised how to get this code to work, thank you! I had to paste it instead into the individual product page custom CSS, and it worked! I will do them individually, thank you so much! 🙂

[MJ82]

Actually, the problem now is that while this change is great on desktop view, it also makes the change on mobile view, and it doesn't look right there. Is there a way to leave mobile view at full width (responsive to each size mobile device) and JUST change this for desktop view?

[MJ82 · Accepted solution]

This is the final answer / solution (thank you for your original help below folks!):

To adjust / shorten product description width on desktop view only, while keeping width on mobile view full-width and responsive, use this code in the product page custom CSS for that section:

.js-enabled.accordian.mt-8 .rte {
width: 50%; /* Desktop width */
}
@media (max-width: 768px) {
/* Adjust the breakpoint as needed */
.js-enabled.accordian.mt-8 .rte {
width: 100%; /* Full width on mobile */
}
}