Jump to content

Problems with Formatting on Smaller Screens

Recommended Posts

Posted

Hi, I did a good deal of work to customize my site.  It worked great for a number of years.  It still functions perfectly on large screens, but all hell breaks loose on laptops, tablets and mobile.  I'm hoping not to have to start over from scratch...

The site is grahamby.com

Thanks all!

  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Posted
17 hours ago, Grahambles said:

Hi, I did a good deal of work to customize my site.  It worked great for a number of years.  It still functions perfectly on large screens, but all hell breaks loose on laptops, tablets and mobile.  I'm hoping not to have to start over from scratch...

The site is grahamby.com

Thanks all!

Can you point out where you want to fix on smaller screens? any screenshots could help a lot so we can give the right solution

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

📑 Squarespace embed PDF popup (affiliate link)

Posted

Thank you.  There are formatting problems inside the each of the galleries when individual images are selected. The content shifts far to the left and will usually show artifacts of other gallery content.

This does not happen on larger screens where the content is always centered properly (Note: I have intentionally decentered some images).  

LAPTOP:

image.thumb.png.8d672628579e1cfcbf9d541d0a6c1382.png

 

image.thumb.png.93f5c8ed5e7b151a81e0086f2be055ea.png

 

image.thumb.png.31809d6eb71e1233c83bed6802086d5d.png

 

The problem gets worse on a mobile device.

IPHONE:

 

image.thumb.png.6a86eeae4356dd78b55f8f63fbbdfcef.png

 

image.thumb.jpeg.498534897e0e8e39e75c99c0f71f709f.jpeg

 

 

Posted
On 7/21/2024 at 11:10 PM, Grahambles said:

Thank you.  There are formatting problems inside the each of the galleries when individual images are selected. The content shifts far to the left and will usually show artifacts of other gallery content.

This does not happen on larger screens where the content is always centered properly (Note: I have intentionally decentered some images).  

LAPTOP:

image.thumb.png.8d672628579e1cfcbf9d541d0a6c1382.png

 

image.thumb.png.93f5c8ed5e7b151a81e0086f2be055ea.png

 

image.thumb.png.31809d6eb71e1233c83bed6802086d5d.png

 

The problem gets worse on a mobile device.

IPHONE:

 

image.thumb.png.6a86eeae4356dd78b55f8f63fbbdfcef.png

 

image.thumb.jpeg.498534897e0e8e39e75c99c0f71f709f.jpeg

 

 

Can you share link to page in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 7/26/2024 at 2:33 AM, Grahambles said:

Thank you.  Here are the links to the Gallery pages.  Clicking on the images on a laptop or mobile device will show the issue...

http://grahamby.squarespace.com/los-occultes

http://grahamby.squarespace.com/piedmont

http://grahamby.squarespace.com/california-postcards

http://grahamby.squarespace.com/these-colors-dont-run

Can you take a screenshot on Large screen? I just want to know how it should display

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

Here is an example of a fully centered diptych on a large screen.  It displays as intended.image.thumb.png.bd3a7c118fba170120610a203ebe52e7.png

 

Here is the same page as displayed on a laptop...

 

PastedGraphic-1.thumb.png.0bc5c43a63f9788df223a146106727fb.png

 

Here is the same page as displayed on a mobile device (yes, that's right)...

 

image.thumb.jpeg.68d4a9901cc27725f0dcac51c0772dec.jpeg

 

 

 

 

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.