Jump to content

Is there a way to force mobile view on tablet/Ipad

Recommended Posts

Looking at your website the sections that struggle the most on tablet seem to be those that are narrower on desktop, i.e. the ones that leave ~4 columns blank on either side. Doing this looks good on desktop, but creates significant margins on tablet, and very squashed content. You can use CSS to create narrower sections that don't suffer from this problem, or create blank space within the blocks to simulate space on the sides (make the image block wider and then align the image left or right to leave space).

Also setting images to fill instead of fit helps the image take up a more consistent amount of space as the text gets narrower and taller on smaller screens.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
9 minutes ago, jadeeleanor said:

 

Hi @Ziggy,

Yeeaahhhh, thats not what I want to do really... I just want the the mobile view to display on tablet, its there really no way of doing this?

Not a problem, but no, there's not a way that I've seen or can find to change the mobile break-point. 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

For tablet view FE isn't much different from the classic editor. In CE you would have the same problems at ~800px VW if you added spacer blocks on either side, and CE has very limited control of the mobile view.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

You could try adding this custom CSS and redesigning the section "Hi there, I'm Jade":

section[data-section-id="634c4cc902fec37a2f8cfaed"] {
  .fluid-engine {
    --sqs-site-max-width:750px;
    --sqs-site-gutter:0vw;
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

 

@Ziggy, but you used to be able to change the mobile break point on 7.0

Thank you for the code, I'm not sure what it's meant to do though. I just want the same view on tablet as on mobile because currently the spacing and everything is out of whack on every single page.

Edited by jadeeleanor
Link to comment

To be honest, the mobile view on larger devices is somewhat problematic without increasing that breakpoint, so I don't think that would solve this problem.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 3 months later...
On 5/12/2023 at 8:46 PM, thawk said:

so are we just pretending that tablet view isnt important, or that according to Squarespace, no-one uses a tablet....?

Squarespace probably could launch a third layout editor for tablet, it might be useful sometimes, but it increases the work to build and maintain, plenty of people aren't happy with the mobile being different for that reason. With careful design you can create a desktop layout that doesn't break on tablet, but it can limit creativity.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 4 months later...

Ugh man, I'm having the same issues.

 

Between 400 to 600px (ish) wide (window width on browsers) many pages on my site (which is largely a photography portfolio ... with many images) have photos that get cropped at the top.

 

I would much prefer Squarespace create a third editor for tablets (and narrow web browsers windows) as it would be so much faster than trialing and erroring so many images manually. 

I'm seeing that some people are literally building a third version of their sites and using jquery / javascript to send users to three different pages.  I've done that for desktop and mobile already ... so much work. 

 

Has anyone found a solution? 

Edited by mames
Link to comment
5 minutes ago, mames said:

Between 400 to 600px

This is well within the mobile editor which goes up to 767px. Can you share your website and describe your specific issues?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 1 month later...

Hi there — first-time site creator. I have the desktop and mobile sorted, but how do I edit for iPad view?

Someone on YouTube recommended a plug-in called "Fix Fluid Engine Tablet Spacing," which changed the spacing on mobile view drastically, and beyond repair, I had to rebuild the page.

Is there a tutorial that I can watch and learn from?

Thanks 🙂

Link to comment

There isn't a specific way of editing the entire tablet view like there is for mobile. You can use CSS in very specific ways to adjust certain parts of the layout on tablets, but there isn't a general way to do this. If you have a specific issue you want to address then I can potentially help with that.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

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.