I have a question about how Slack may have done the top portion of their site. They have the graphic there on the left and the text on the right. When you shrink the browser in smaller, the image retracts and becomes smaller. That is, it is responsive. And then obviously it has a breaking point for tablet and mobile. I know how the breaking points work. But how do they get that image to shrink before the break?
When I put in image there it doesn’t move when I shrink the browser. Are they using a container or dev block or something and sticking the image in that?
Before thinking responsive, think elastic. If the image is width:100% in a div that has width:40% for example, the div will shrink with the page and the image will shrink along. Then whatever different happens when a breakpoint is reached.
By thinking elastic, and flow (the way elements arranged themselves one close to another), you can achieve very adaptative websites without even adding responsive rules. Strategy begins by using a lot of %, vh, vw, vmin, vmax units. Webflow supports all those units and make building that kind of designs very easy.
