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

Hiya, 

My website looks awful on tablet/ipad is there a way to force it to view like it does on a mobile but on the tablet/ipad?

I'm using 7.1 - https://www.jadeeleanor.com  and I thought I'd be able to do this with media break points but there doesn't seem to be an option for this?

Thank you 
 

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.

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?

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. 

Really? Why would that even not be a thing? It seems that 7.1 is really bad for quite a few things.

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.

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;
  }
}

@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.

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.

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

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.

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? 

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?

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 🙂

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.

Hi, is there any update regarding the tablet view editor progress? I’m having problem with a client’s website where the buttons are squashed on the left hand side in tablet view (see image attached) but looks fine on desktop and mobile previews. This should be straightforward no-code task, but unbelievable how random the Fluid engine result is. I tried everything logical within the button section to adjust the spaces, but having the same outcome.

Here's the page link:
https://www.thrivingondisruption.com/disrupt-with-impact

Thank you!

13 minutes ago, GLUE said:

Hi, is there any update regarding the tablet view editor progress? I’m having problem with a client’s website where the buttons are squashed on the left hand side in tablet view (see image attached) but looks fine on desktop and mobile previews. This should be straightforward no-code task, but unbelievable how random the Fluid engine result is. I tried everything logical within the button section to adjust the spaces, but having the same outcome.

Here's the page link:
https://www.thrivingondisruption.com/disrupt-with-impact

Thank you!

I've solved this tablet view problem (for now) by not leaving any column space on the left and right  sides. Fixed the view on tablet view. It's odd but there you have it.