How to stretch out the product title name?

[GreenPax]

Hi! Please help on how to stretch out the product title name into 1 row (could be 2 rows if long) so that it's not packed like this in the picture below. 

Shop url - https://greenpaxusa.myshopify.com/

[Moeed]

Hey @GreenPax 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.product__title {
    white-space: nowrap !important;
    margin: 0 !important;
}
.product__description.rte.quick-add-hidden {
    margin-top: 0 !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[GreenPax]

Hi, it did work however some products with longer product titles tend to go beyond the page. See below pic. Is there a way where some words go on the second row instead of going beyond the page width? thanks

[DaisyVo]

HI @GreenPax ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (min-width: 1024px){
.product__title h1 {
    text-wrap: nowrap !important;
}
}

Here is the result:

Please let me know if it works!

Best,

Daisy

[namphan · Accepted solution]

Hi @GreenPax,

Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:

@media screen and (min-width: 990px){
.product--small:not(.product--no-media) .product__info-wrapper {
    max-width: 65%;
    width: calc(65% - var(--grid-desktop-horizontal-spacing) / 2);
}
.product-form__buttons {
    margin: auto;
}
}

[GreenPax]

Thanks so much!!

[namphan]

Hi @GreenPax,

You're welcome and happy to help 😊