Jump to content

Tablet view with Fluid Engine

Recommended Posts

  • 2 weeks later...

I just rebuilt my website it Fluid Engine to get the hang of it before implementing it on client sites. And the tablet view looks terrible. Is there an easy fix for this, or a way to have the site look like mobile but on a tablet? I'm super concerned with creating client sites that aren't truly responsive. Ugh. Thanks for your advice!

Link to comment
9 hours ago, MColeman said:

I just rebuilt my website it Fluid Engine to get the hang of it before implementing it on client sites. And the tablet view looks terrible. Is there an easy fix for this, or a way to have the site look like mobile but on a tablet? I'm super concerned with creating client sites that aren't truly responsive. Ugh. Thanks for your advice!

You can share link to page where you have problem, we can help easier

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!)

Link to comment
13 hours ago, MColeman said:

@tuanphan I really feel like the whole site is problematic. Is there any CSS to take each page of my site and at the tablet size have it respond like mobile size? Or can you really only call out certain sections and adjust them? Thanks.

Depend on. In some cases, it is possible to use code to adjust the whole page so that the tablet is similar to the mobile phone. Others, need to adjust each section.

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!)

Link to comment

Site URL: https://www.shroomtown.co/contact

I've been working on a contacts page for our website, I have come to notice an issue with the alignment on the contacts page. As you can see in the attachments the image and the map become unaligned once the screen size becomes smaller, and the smaller it gets before hitting the threshold for mobile view, the more unaligned these two elements become.

How can I fix this issue? so that everything is resized to stay aligned with one another?

Image of the site when the elements are aligned at full screen size:
image.thumb.png.cf221b2013e28e616254f86c5e6e0b3e.png

 

Smaller dimensions:
image.png.44211af2b3d1d901b3920df1bc0b7d3f.png

Link to comment
23 hours ago, Sepehr said:

Site URL: https://www.shroomtown.co/contact

I've been working on a contacts page for our website, I have come to notice an issue with the alignment on the contacts page. As you can see in the attachments the image and the map become unaligned once the screen size becomes smaller, and the smaller it gets before hitting the threshold for mobile view, the more unaligned these two elements become.

How can I fix this issue? so that everything is resized to stay aligned with one another?

Image of the site when the elements are aligned at full screen size:
image.thumb.png.cf221b2013e28e616254f86c5e6e0b3e.png

 

Smaller dimensions:
image.png.44211af2b3d1d901b3920df1bc0b7d3f.png

You need to recreate layout to adjust some thing

First, add text, form

Next, add 1 Line Block here

image.thumb.png.fa281f7082ff5b8d54054462bc4f9356.png

Next, add Map, Image

Next, remove Line Block

Then check again

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!)

Link to comment

@tuanphan

Here is a site whereby me flipping my iPhone to landscape a massive gap appears between Services and the Image: https://devkntdir.squarespace.com/?password=sneakpeek

Is that solvable with CSS?

image.thumb.jpeg.823bed8f6188baef4689dcf0949c6772.jpeg

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
13 hours ago, RolandFuseHub said:

@tuanphan

Here is a site whereby me flipping my iPhone to landscape a massive gap appears between Services and the Image: https://devkntdir.squarespace.com/?password=sneakpeek

Is that solvable with CSS?

image.thumb.jpeg.823bed8f6188baef4689dcf0949c6772.jpeg

It looks like you solved it?

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!)

Link to comment
6 hours ago, tuanphan said:

It looks like you solved it?

Not really. If you use an ACTUAL phone, not a simulator, and flip it to landscape, the spacing under Services is still there.

I have been told by Support that it a top priority and they are working on a solution. If you have one, I happily take it. 🙏🏽

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
  • 2 weeks later...
  • 3 months later...
  • 5 months later...
  • 2 months later...

Just wanted to follow up and say that Will's script saved the day. Thanks Will!

And comon' Squarespace. I know tablets aren't widely used in general, but if you're building sites that are targeted towards older adults who have a high tablet use rate, it makes it near impossible to do without Will's script.

Edited by dontanalyzethis
Link to comment
  • 4 months later...

Literally every other website builder I have used has had a tablet layout / viewport editor.

Some go even as far as Desktop / Laptop / Tablet / Phone / Phone Small Screen

It's extremely disappointing to see that Squarespace doesn't. My website I have been building looks absolutely crap on tablets and Squarespace support have offered basically no support. I always get a stock standard response of "we currently don't support that feature, if you feel comfortable writing code you can use CSS"

What are we paying for?

Link to comment
  • 5 weeks later...
  • 1 month later...
On 6/26/2022 at 2:40 AM, tuanphan said:

Currently Fluid Engine support Desktop - Mobile view edit only.

If you need to adjust tablet, you can post problem, we can help with custom code

I need help with font sizes and formatting for my entire website on tablet mode. It works on desktop and mobile, but isn't legible on tablet. 

Link to comment
On 1/5/2024 at 10:19 AM, Davidm1992 said:

Hey guys,

I've tried Will's solution for Tablet mode. The issue is that if I change to 749px and adjust parts of the website (text blocks, Image Blocks, Buttons, etc) sitewide, then mobile view at 428px becomes the issue then. Everything on mobile gets all messed up. 

Has anyone come across this? Maybe I'm, doing it wrong?

https://www.connstructor.ie/

Password: test123

I agree. I used it and it was really nice to see what tablet looked like, but when I made changes it ruined the mobile version.

Link to comment

I'm extremely disappointed in Squarespace. This is a huge pain point and a pretty embarrassing lack of functionality. It's 2024- people access the internet across a plethora of devices.

Will's code didn't work for me. Like others, it messed up the mobile view. The only way I've been able to make this work is to create different sections that only display depending on page width.

For example, using this code, you can hide a section on tablet-esque devices (I tested and it is just wide enough to hide it on an iPad Pro 11" but you could expand the range to cover more devices):

/* Hide Section On Tablet */
@media screen and (min-width: 749px) and (max-width:850px) {
[data-section-id="insertIDhere"] {
    display: none;
}
}

 

Regardless, comon' Squarespace. This is amateur hour.

Edited by dontanalyzethis
Link to comment
  • 1 month later...

Just here to join the conversation that the tablet design is a disaster on my site and can't be changed. With image galleries set in blocks, the images are teeeeny and there are huge gaps on the sides that make the strings of text absurdly long. Squarespace, I see YEARS worth of comments like this - no fix? 

Link to comment
  • 1 month later...

Jumping in on this thread to see if @tuanphan you can help and see if we can fix the tablet view on this site to look more like mobile rather than how it looks now on an iPad (terrible). The mobile site looks wonderful but my client uses her iPad and has flagged how the wording jumps to the next line and the images are squashed. 

Site in question: edwinamoutrayimages.com.au

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.