Elements not displaying properly in sizes between full destop and mobile i.e. Tablet mode not displaying correctly.

Hi,

I have the main landing page of my website how I like in terms of layout in both desktop and mobile mode.  However, when resizing the website down toward mobile to emulate tablet mode the various buttons, alignment of text and various visual elements do not size corectly and look messy and unsightly.

After doing a little research on this topic it returns a fair number of complaints about the lack of a tablet mode to be able to adapt site layout to these mediums.  Most answers at the moment are to post on the forum and someone will help with CSS code to adapt elements to your specific site.  So, this is what I'm doing.

The main issues so far are:

1. The colour keys on the website which are comprised of shapes i.e. rectangles and text within them are not retaining the shape and the text is not remaining horizontal within them.  I would the shapes to remain as they appear on the main page along with the text, just a reduction in size of the font or the shape as the browser is reduced in size would be good.
2. Buttons appear to move down from the image element or the summary block leaving large spaces between elements.
3. When the browser is reduced to a size that first changes the layout from 3 columns to a single column, just before reaching true mobile size some layout issues occur and more prominently images and summary block blog images do not fill the column and instead occupy a small corner.

I don't know whether I need to highlight everything, as it should be obvious what the issues are.  But the above highlights the main ones that I can see.  Ideally, I'm trying to get the adpative traits of the transition sizes between full desktop and mobile to look professional and as close to how the desktop and mobile versions look.

Please can someone help.

Many thanks in advance.

1 hour ago, UKCWP said:

Please can someone help.

Can you share your website URL and some screenshots of the problems you're wanting to fix?

Hi Ziggy.

Sure, the website is: https://round-sunflower-sdjs.squarespace.com/

I've attched a few of the issues.  The first is the main page and is displayed as it should.  The incorrect 1 and 2 images are when the browser is reduced in size to tablet size and three columns are retained.  The incorrect 3 image is where the three columns just reduce to one column but not quite mobile sizing and the images no longer occupy the space they should and their are spacing issues.  The spacing issues continue across all other blocks.

Ideally when you transition into tablet mode three columns would display 2 and then entering mobile mode the columns become one etc.  Does that make sense?

There isn't a single answer to this. There isn't a way to transition smoothly between the desktop and mobile layout grid. You have to find the best way to set up a desktop layout that works down to 768px and a mobile layout (sometimes with the help of code or a chrome extension) that works up to 767px.

Have a read of this:

https://www.will-myers.com/articles/fixing-the-tablet-spacing-problem-in-squarespace-fluid-engine

https://chromewebstore.google.com/detail/fluid-engine-tablet-spaci/gemmfnoajaghnaddkccmekbchdgckdab

Hi Ziggy,

Thank you for that.  Not particularly helpful.  I'm in two minds whether I should keep with Square Space or move to a similar solution offered elsewhere.  It seems absurd that SS do not offer tablet or phablet options.  I know for a fact other companies do.

I'll have a play, but I'm not happy.  I have already tried the Will Myers proposed solution and when you edit the tablet code and save and then revisit the mobile, the mobile layout is messed up.  So that doesn't work.  Also, I have tried the Chrome extension and it doesn't want to activate.

If I still can't find any solutions, I'll have to go eleswhere.  This is a major oversight on the part of Square Space and is extremely poor.  You cannot assume everyone is using either a mobile or a desktop computer, especially in the day and age of the tablet and phablet hybrids.  Why should your webiste not adapt to these mediums and why isn't their a way to transition smoothly between the desktop and mobile layout grid?