Tablet Layout Issues

Hi Guys

I've been Squarespace for my website for 2 years now and I am finding it increasingly challenging as Squarespace is lacking a lot of basic functionality for a website builder in 2023.

Has anyone figured out a way to improve the layout on tablets? As well as the buttons?

Building my website for desktop mode is fine, mobile layout is adjustable but when viewing the website on a tablet it just looks horribly wrong and unprofessional so you have to be careful with what elements you use and how you arrange them.

See images attached.

I have contacted Squarespace support and they have advised they don't provide a tablet layout feature which is concerning and disappointing for such a big brand. The three main mediums for viewing websites are Computer/Laptop, Tablet, Phone.

Due to this it's a little hard to get creative with layouts unless you know a lot of code, but even with code some things don't work well.

Any help will be greatly appreciated.

The solution now is using custom code. If you share link to pages where you have problem, we can give the code

14 hours ago, tuanphan said:

The solution now is using custom code. If you share link to pages where you have problem, we can give the code

Hey

It's https://8tysix.com.au/home-h2-2023 and Pass is 1010

#1. You want to increase with to make button text on one line?

#2. About Us on one line?

Learn more button, add a space above it or?

15 hours ago, tuanphan said:

#1. You want to increase with to make button text on one line?

#2. About Us on one line?

Learn more button, add a space above it or?

Yes I want to make the text on one line and have more padding like the desktop buttons. 🙂

You can add this code to Website Tools (under Not Linked) > Custom CSS

/* Tablet layout */
@media screen and (max-width:1024px) and (min-width:768px) {
/* Get in touch today */
.fe-block-9d01720c412e12330905 {
    grid-column-start: 10 !important;
    grid-column-end: 18 !important;
}
}

I see you changed layout on About Us, it looks fine on tablet

3 hours ago, tuanphan said:

You can add this code to Website Tools (under Not Linked) > Custom CSS

/* Tablet layout */
@media screen and (max-width:1024px) and (min-width:768px) {
/* Get in touch today */
.fe-block-9d01720c412e12330905 {
    grid-column-start: 10 !important;
    grid-column-end: 18 !important;
}
}

I see you changed layout on About Us, it looks fine on tablet

Thank you for this! I will give it a try!
Will this fix all the buttons on tablet layout or only that specific button?

On 12/9/2023 at 1:06 PM, vk2020 said:

Thank you for this! I will give it a try!
Will this fix all the buttons on tablet layout or only that specific button?

Only specific button, if you want to all button, try this new code

/* Tablet layout */
@media screen and (max-width:1024px) and (min-width:768px) {
.button-block a {
	white-space: nowrap;
}
}

9 hours ago, tuanphan said:

Only specific button, if you want to all button, try this new code

/* Tablet layout */
@media screen and (max-width:1024px) and (min-width:768px) {
.button-block a {
	white-space: nowrap;
}
}

 

Hey Tuanphan

That code works! The only issue is some of the buttons overlap onto each other

On 12/11/2023 at 4:23 PM, vk2020 said:

Hey Tuanphan

That code works! The only issue is some of the buttons overlap onto each other

 

Yes. the code will prevent button wrap..so it will make overlap on some places

Which screen sizes do you see problem? I will give another code to fix these buttons

2 hours ago, tuanphan said:

Yes. the code will prevent button wrap..so it will make overlap on some places

Which screen sizes do you see problem? I will give another code to fix these buttons

It's only on tablets that I experience this problem.

Thank You