Mobile view

Would someone be willing to look at the following pages to see how best to go about the alignment issues that occur when viewing these pages in mobile view. The desktop view is good but some funky stuff happens in mobile.

Thanks in advance for your help!!!

You're using Squarespace's Fluid Engine, but looks like you haven't edited the mobile layout. 

Mobile and Desktop layouts are separate on Fluid engine, which explains why many of your icons are all towards the bottom of the Library page on mobile.

Check out this guide:
Mobile layout

If that doesn't solve the problem, jump back on here, and I try and help further.

Thank you for clarifying!

I went through and adjusted the library page in mobile view and it resolved the issue when viewing on a phone.

When I look at the page on an iPad, I still have the same wrapping issue as before, where the text is stacked. Text should not wrap. 

The text wrapping on the titles is to do with using a responsive website builder. Once you get to a screen size below the width of your content, the columns all get narrower, and the only thing you can do is to manually set the text to scale down in line with the screen width, but the text would end up unreadable. Old websites tended to get around this by having a very narrow content width (compared to modern design), that could be an option for you on this page, narrower content and only 2 columns before mobile? But that might not be the option you want.

I came across these codes for mobile and tablets. Don't know if this is beneficial. What would be the css code to put in for tablets below to prevent screen wrapping and I can experiment with it.

/* 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 }

Yes, that would work for setting a font size just for certain screen sizes. I would suggest you would need 768px instead of 640px, and 1200px instead of 950px in your case.

On the mobile device the library shows up ok. No text wrappping issue. That screen is approximately 3" by 6".

The Apple iPad is a 12" screen and has text wrapping. The browser on the iPad is safari