Jump to content

Mobile spacing issue

Recommended Posts

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




Edited by madseason
Link to comment
  • Replies 9
  • Views 273
  • Created
  • Last Reply

Top Posters In This Topic

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)


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


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



Link to comment

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: 




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



Edited by madseason
Link to comment

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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.