I want the text to continue on the same line

Technical Q&A
1

Hello I use the debut theme, and in the mobile version of my cart page, the variant text under the product title is on two lines, instead I want to fit the variant text in one line, I want the text to continue on the same line.

I’ll attach a screenshot below, I think I have to use the CSS code “white-space: nowrap;” but I don’t know where to place that exactly, I use the debut theme (light version)…

I understand that I can’t do the same with the product title because the text will be overlapped with the price, so I just wanna do the variant text in the mobile version of my cart page

Capture22.PNG
Capture22.PNG589×605 17.9 KB

Any help? thanks!

2

@Elie98

You would run into the same issue with the variant product options too. Not only that but if your content was wide enough it could overflow past the viewport potentially enabling the page to scroll horizontally and provide a poor UX on mobile devices.

The CSS you are referring to should be the right code to use but as I said it would not necessarily be a good idea unless you are going to limit the number of characters it can have.

Go ahead and try targeting “**.**product-details__item” with your CSS.

Hope that helps!

3

@RobDukarski yeah you’re right, I added that same code in “.product-details__item” but it did affect both the product title and the variant/option at the same time, which is not what I need… I think it’s impossible to do the variant text only without messing something, thank you anyway!

4

@Elie98

You could target “**.**product-details__item–variant-option” instead but the product title should not have been affected with the previous selector, so I’m unsure why it was.

The reason I shared the previous selector was that it should work for product variant options and line item properties.

Hope that helps!

5

@RobDukarski So I just added the code in “**.**product-details__item–variant-option” but it didn’t do anything, nothing has changed it’s still the same, I’ll attach a screenshot below

Capture11122.PNG
Capture11122.PNG816×447 27.6 KB

6

@Elie98

Sorry for the confusion but I meant for you to add something like this:

.product-details__item--variant-option {
  white-space: nowrap;
}

Separately within your stylesheet (or wherever else you may have it load, like directly on the cart page).

Where you added it affects just the next line item property direct sibling element if that variant option does not have the “hide” class.

Hope that helps!

7

@Elie98

Please share your site URL,
I will check out the issue and provide you a solution here.

Thanks!

8

@RobDukarski I tried that now, I created new one separately, but it did affect both the product title and the product variant/option, I don’t know why that is happening, we used .product-details__item–variant-option it should only affect the variant not both

9

@Elie98

Please apply this CSS to your css file

@media(max-width:768px){

.cart__product-information ul.product-details {width:300px;}

}

Thanks!

10

@Elie98

Please Apply this CSS to your css file

@media(max-width:768px){
    .cart__product-information ul.product-details {
        width: 181px;
    }
}
@media(max-width:425px){
    .cart__product-information .list-view-item__title {
        width: 130px;
    }
}

Thanks!

1 Like
11

@infoatcodelab7 Thank you so much, it’s perfect!