tablet view formatting issue (Brine template)

Hello all, 

I'm a new user and still learning my way around SquareSpace. I tried Googling and searching within SquareSpace but I cannot find an answer to my question. I've recently created a website that looks good on desktops and smartphones but terrible on tablets. I do not own a tablet so all I have to go by is the 'Tablet View' on SquareSpace's website.

I thought SquareSpace would automatically adjust my website so that it looks good on tablets but it appears this function is not working. 

Specific examples include the text under the Our Mission section being reduced to a very narrow column of text in Tablet View even though it formats correctly and looks fine in Phone View. See attached pictures for examples of formatting issues.

Any suggestions welcome, including disabling Tablet View (if possible) so that the desktop version appears on tablets. 

My website is: kidcortex.com

Password: thisisthepassword

Thanks and Cheers!

Add this code to Home > Design > Custom CSS

@media screen and (max-width:900px) and (min-width:641px) {
/* Our mission width */
div#block-yui_3_17_2_1_1576300694759_14723+.row>.span-3:nth-child(1) {
    width: 15%;
}
div#block-yui_3_17_2_1_1576300694759_14723+.row>.span-3:nth-child(2) {
    width: 50%;
}
div#block-yui_3_17_2_1_1576300694759_14723+.row>.span-6:nth-child(3) {
    display: none;
}
/* 3 columns text size */
div#page-5e09b87a31a7876caf7405f9 h3 {
    font-size: 18px;
}
}

@tuanphan Awesome! Thank you for the quick reply. This fixed the above mentioned issues!

is this a code that can work for any website having this issue or just for the above mentioned website? I am having the same problem with my three columb formatting in tablet form, and in desktop form when I make the window smaller.

2 hours ago, brimartin said:

is this a code that can work for any website having this issue or just for the above mentioned website? I am having the same problem with my three columb formatting in tablet form, and in desktop form when I make the window smaller.

Each case needs different code. If you share link to page where you have problems, we can help easier.

Hi. I (like many other it seems) am tearing my hair out trying to get a site to adequately function at tablet resolutions. I have tried soooo many hacks, I am at the end of my tether. If anyone has any advice / code that might help I would be forever grateful. 🙏

https://pufferfish-sturgeon-nprn.squarespace.com/

pass: regaltuckpointing

11 hours ago, Aaron P said:

Hi. I (like many other it seems) am tearing my hair out trying to get a site to adequately function at tablet resolutions. I have tried soooo many hacks, I am at the end of my tether. If anyone has any advice / code that might help I would be forever grateful. 🙏

https://pufferfish-sturgeon-nprn.squarespace.com/

pass: regaltuckpointing

Hi,

What problem on tablet? If you can describe in more detail, we can help easier

28 minutes ago, tuanphan said:

Hi,

What problem on tablet? If you can describe in more detail, we can help easier

Thank you! The columns get too narrow, images too small, items don't stack and so text runs over and under images.

On 8/18/2021 at 8:36 AM, Aaron P said:

Thank you! The columns get too narrow, images too small, items don't stack and so text runs over and under images.

Hi. Sorry for the delay.

Add to Design > Custom CSS

/* Tablet homepage */
@media screen and (max-width:900px) and (min-width:641px) {
/* top image text */
div#page-6068360668606f65294ba28b .span-12>.row>.col {
    width: 50%;
}
/* our service */
div#page-60f63a1a285ce460d19c7839>.row:nth-child(2)>.span-3:first-child {
    width: 100%;
}
div#page-60f63a1a285ce460d19c7839>.row:nth-child(2)>.span-3:nth-child(n+2) {
    width: 33.3333%;
}
}

Hello! I happen to have the same problem - mainly on the homepage. Computer view is fine, so is mobile (except for the summary block looking a bit funny - screenshot attached) and the tablet view is all bad - text too small or formatted awkwardly, images too small, nothing is aligned. Are you able to help, please?
My site is www.cronz.co.nz.

Thanks a lot in advance!

Zuzana

On 8/4/2022 at 4:04 AM, Zuzana said:

Hello! I happen to have the same problem - mainly on the homepage. Computer view is fine, so is mobile (except for the summary block looking a bit funny - screenshot attached) and the tablet view is all bad - text too small or formatted awkwardly, images too small, nothing is aligned. Are you able to help, please?
My site is www.cronz.co.nz.

Thanks a lot in advance!

Zuzana

Add to Design > Custom CSS

// Fix tablet //
@media screen and (max-width:900px) and (min-width:641px) {
div#block-yui_3_17_2_1_1659403612199_12511+.row .span-8 .span-2:last-child {
    width: 100%;
}
div#block-yui_3_17_2_1_1659403612199_12511+.row .span-8 .span-2:not(:last-child) {
    width: 33.3333%;
}
}

Hello all,  I'm a complete novice when it comes to code so excuse my ignorance.  My website which is yet to be published is currently having the same issues with images and shapes being rearranged terribly and leaving the site looking nothing like it does on mobile or desktop.  Ideally I'd like to have the site laid out on a tablet as it shows on mobile if possible.  Can you help?.

Eternally grateful!

www.plantsbythere.com

23 hours ago, mailsemaj said:

Hello all,  I'm a complete novice when it comes to code so excuse my ignorance.  My website which is yet to be published is currently having the same issues with images and shapes being rearranged terribly and leaving the site looking nothing like it does on mobile or desktop.  Ideally I'd like to have the site laid out on a tablet as it shows on mobile if possible.  Can you help?.

Eternally grateful!

www.plantsbythere.com

 

 

Hi,

Which page do you have problem?

Hi,

On the homepage, services, projects main page and each of the project pages and about page.  All of the images / shapes are a completely different scale and position to both web and mobile making the whole site look very messy.

Thanks in advance for looking at this!