Responsive Page that changes width based on page width but also collapse sections when hidden

pathomap · 2024-08-19T23:13:58.570Z

How is it possible to have a page that is responsive but also sections collapse when hidden (ie groups change size when hidden).

Thanks in advance!

msgiblin · 2024-08-20T00:27:58.498Z

Hi there,
I would say under a broader definition of ‘responsive’, having groups that collapse when hidden / change size is all part of responsiveness. I currently utilize this on a recipe app I’m developing where the recipe photo is on the right column, but when the page width is 600px or less, that column disappears. I then have a hidden photo in the left column (now the only column) that appears. To the user, it seamlessly looks like the photo jumps from the right to the center, but in reality, just some crafty show/hide conditions.

pathomap · 2024-08-20T00:40:13.311Z

msgiblin:

I would say under a broader definition of ‘responsive’, having groups that collapse when hidden / change size is all part of responsiveness. I currently utilize this on a recipe app I’m developing where the recipe photo is on the right column, but when the page width is 600px or less, that column disappears. I then have a hidden photo in the left column (now the only column) that appears. To the user, it seamlessly looks like the photo jumps from the right to the center, but in reality, just some crafty show/hide conditions.

The challenge is if it’s on a phone I want things centered. If it’s on a computer to one side…

msgiblin · 2024-08-20T01:19:10.604Z

pathomap:

if it’s on a phone I want things centered. If it’s on a computer to one side…

Precisely what I’m doing. Since a phone’s width is going to be less than 600px, my approach works the same way. Here’s my screenshots:

Desktop:

image1205×409 55.8 KB

Mobile:

image322×760 40 KB