Jump to content

tablet view formatting issue (Brine template)

Recommended Posts

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!

1273097357_OurMission.png.5f59f7bcdc68f90b3cf230a74057275b.png

PicsAndText.png.c1f5654ad77e3e4a5fffea7a42c18dde.png

Link to comment

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

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 11 months later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 11 months later...

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

Screen Shot 2022-08-04 at 8.59.34 AM.png

Screen Shot 2022-08-04 at 8.58.49 AM.png

Screen Shot 2022-08-04 at 8.58.58 AM.png

Screen Shot 2022-08-04 at 8.59.05 AM.png

Link to comment
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

Screen Shot 2022-08-04 at 8.59.34 AM.png

Screen Shot 2022-08-04 at 8.58.49 AM.png

Screen Shot 2022-08-04 at 8.58.58 AM.png

Screen Shot 2022-08-04 at 8.59.05 AM.png

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

image.thumb.png.57047257baa3a0b78e86456bd9b11e6d.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.