Jump to content

Responsive design issue as site responds to ipad / tablet screen dimensions

Recommended Posts

Site URL: https://seanjsprague.com

Hello,

I'm look for some help and suggestions to help with an issue that's come up recently. I did a slight redesign of my site and checked it on a few devices to see how it would look on a phone, tablet, desktop. Everything was fine except on my 3rd gen iPad air. It appeared that my site did not recognize that it was an iPad and thus the responsive design was in "desktop" mode" on an iPad. After contacting tech support and going back and forth it's basically landed that in the Wells template the iPad design does not get trigged until certain pixels width dimension occur. From tech support:

"I have been doing some tests on my end based on what you reported and i believe that, the issue that you reported is connected to a specific rule present within the Wells template. By default, this template will condense navigation links into the mobile display mode, if the screen size is less than 800px. Since your iPad is able to render 834px wide, it will load the desktop version. To give you further insight on this, allow me to share a video on my end where you can see the template mobile breaking point taking effect: Video. "

Since the new iPad pixel dimension width is 834px, my site using the Wells template will look as though it's a desktop on new iPads. 

It was suggested by Squarspace it that I come here and seek some suggestions (as I'm not a coder) for some custom code that I might be able to inject that alters my sites behavior so the responsive design kicks into mobile/table mode at say 900 pixels wide (or some other amount of my choosing.) 


Any suggestions/examples of custom code that address this are welcome. Attached are some screen shots of how the site currently looks on an iPad vs what it should look like on a tablet. 

Thanks so much!

ps - Here is the video link from Squarespace IT that shows the pixel dimension of when "tablet mode" kicks in - https://share.squarespace.com/Jru1my4y

IMG_BDBBCA12B2E2-1.jpeg

Screen Shot 2021-03-08 at 1.35.50 PM.png

Edited by seanjsprague
Link to comment
  • Replies 2
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 4 months later...

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.