Break Points / Responsive Design

When in a browser on a desktop computer (Safari, Chrome, Firefox), I’ve had trouble figuring out how to get my website to break and become responsive.

I want the site to break into tablet and then to mobile when the viewport is reduced in size. Right now it just stops at 1024 px and the site is covered by the viewport window if it is made smaller.

I have the limit scale on the large size set to 1800 px (the grid won’t grow past that). On the small side is 1024 px. I was assuming it would break to tablet at that point, but it doesn’t work.

Any pointers on how to make a Ready Mag site truly responsive. Not just on specific devices, but when a viewport is resized?

Thanks for any help.

-S

2 Likes

Readymag does not use a Responsive system; only Adaptive. Still, not long ago, I read they will be working this year on implementing some kind of ‘hybrid’ …wondering what this would mean for break points.

:thinking: I’m curious, nowadays responsive has proved quite irrelevant. @Mach what are you most interesting in regarding this?

1 Like

I’m fine with it being just adaptive (not fully responsive), but even the adaptive doesn’t work on the browser. It stays on the desktop size.

When shrinking the viewport smaller, I want the site to break from desktop, to tablet, and then to mobile. Any ideas?

It is not meant to do that, resizing the browser window won’t show you the other layouts—at least not at the moment. :crossed_fingers:t3:

What do you need this for? Quickly testing layouts on browser? Me and my colleagues have never found a need for this using R/m; only when testing custom sites.

Yes, it is for testing. But, it’s also best practice to have that functionality for accessibility and various computer sizes. I don’t see many websites that don’t account for breakpoints on desktop.

I would request R/M to continue to develop for these use cases. Thanks for the answers.

2 Likes

It’s insane that R/M websites don’t break to the tablet view <1024px and mobile ~320px on desktop computers. Have you figured out any custom code to add to the header to allow for proper responsiveness?

I’m struggling with the same problem. This lack of responsiveness and also how the animations don’t behave relative to the layout, only with absolute values. Any tips?

1 Like