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

    stock

        resources

 

Edited by madseason
Link to comment
  • Replies 9
  • 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)

{ 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 }

 

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: 

768x1024

800x1280

1024x1366

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.