Jump to content

Responsive layout for ipad/tablet devices issue (want to format like phone)

Recommended Posts

In a previous build of our site I was able to set some parameters using CSS that would cause the site to display on tablet devices exactly like it did on a phone. After moving to 7.1 that doesn't seem possible (or at least I can't find the selectors/flexbox settings to change).

Does anyone have any idea how to just force it to "full mobile" (so the way it looks when change the edit design to mobile view) for a tablet sized breakpoint.

Below is what I am talking about

This is standard viewimage.thumb.png.e1641ebbf6d5211708264aa96a920e73.png

This is mobile view (note how the search box and "Hear More..." button move to the bottom of the section



And this...is tablet view. Breakpoints are just standard for that but in the past i've used 768 x 1024


NOTE: The issue is that the search box is now doing some weird margin from the "Featured Episodes" text box instead of moving to the bottom. Also if I keep reducing the window in a browser, it keeps squishing the summary block 2 column layout for WAY to long, but that's always been an issue with Squarespace.

The goal is to set it so that once it moves out of "normal" monitor range it just matches the "good" mobile layout.

Any thoughts/help are much appreciated. 


Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

@tuanphan That's a pretty neat hack, but only works if you have code injection available (we do not). Also kind of weird to have to have a workaround for that when it's clearly a bug/missing feature in the platform, but that is what it is.

What I'm looking to do is have the tablet sized display exactly like the mobile at this point. So everything goes to ONLY 1 column once it hits a certain breakpoint. I had that set on the old version of our site (v 7.0) but apparently the CSS I used there just isn't working here. Should just be a general, blunt instrument kinda fix, I just don't know what it is rn. 

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.