Mobile spacing issue

I have a few text issues that are normally displayed as one line on non mobile devices. When on a mobile device, it has split it into 2 lines. Is there css code to adjust for mobile devices?

For example, on non mobile devices, "stock resources" is on one line. 

On mobile devices it looks like

    stock

        resources

I don't see text Stock Resources on homepage. Which page are you referring to?

I have attached an image with a few examples circled. All text should just be a single line. You can also see where it split some words in the accordion boxes forcing them to increase in size. 

You can try some CSS like this to force them 1 line

span.accordion-item__title {
    white-space: nowrap;
}

No improvement. Should each text box be targeted as it also forced the text in some of the accordion boxes out of the side of the box.

I came across these codes for mobile and tablets. Don't know if this is beneficial.

I tried pasting in your code above into where it says to paste code here and it didn't take care of the text wrapping issue.

/* Mobile Screens Only */ @media only screen and (max-width: 640px)

{ CODE GOES HERE } /*

Tablet Screens Only */ @media only screen and (min-width: 641px) and (max-width:950px)

{ CODE GOES HERE }

/* Desktop Screens Only */ @media only screen and (min-width: 951px)

{ CODE GOES HERE }

Try adding the code to top of CSS box

No impact on the text boxes above the accordion boxes. They still wrap from one line to 2 or 3 lines in.

I narrowed down what screen sizes are causing the text boxes above the accordion boxes to wrap to 2-3 lines instead of staying to 1 line.

Those sizes are: 

768x1024

800x1280

1024x1366

Is there code that can be put in for the following page to resolve the wrapping issue?

I have the same issue. I think it's the fluid engine causing the extra space, which may be why there isn't a styling-based (CSS) solution. When I inspect my pages, there is no indication of a margin or a padding on the element. I can change the max-height, but that just makes the space above less and the space below more.

My suggestion is to play with layering of your elements in the editor and make use of the "move forward/backward" and "align vertically" features. In that way you can still see the text but keep the functionality of the accordion. Then, if the elements are too crammed looking, you can add additional padding to make them look right. Good luck!