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

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 view

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. 

Hi,

Can you share link to this page?

Thought it was above but here it is

https://www.discologist.com/

You try this approach

@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.