Breakpoints


 

Understanding Breakpoints

 

Facade has four breakpoints: 1400, 1375, 960, and 650.

 

It may be confusing that there is a second breakpoint that is so close to the first breakpoint. The reason for this is that objects are positioned differently between the 1400 and 1375 breakpoint.

For example, on the project page, you may notice that for the 1400 pixel breakpoint, the text is further away from the images. This gap allows for the project images to grow as the page size increases without running into the text.

 

 

For the 1375 pixel breakpoint, the text is closer to the images because we don't have to worry about the images becoming larger and running into the text. This is because 1375 is the maximum size of this breakpoint, so, the images can only get smaller.

 

 

These two breakpoints work together to make the same layout responsive and work for screens that are larger than 960 pixels (the third largest breakpoint).

 


 

Copying layout from one breakpoint to another

 

It's very easy to apply your layout on the 1400 breakpoint to the 1375 breakpoint. Just follow the steps below.

 

Step One.

Select all the objects on your 1400 breakpoint. An easy way to do this is to use ⌘A (command+A) on your keyboard. Or you can go to Edit > Select All.

 

 

Step Two.

Then use ⌘C (command+C) to copy your layout.

 

Step Three.

Go to the 1375 breakpoint. Right-click on the page and select Paste in Place. This will place everything you copied from the 1400 breakpoint in the exact same spot.

 

For more information about laying out your objects in responsive sites, you can check out this help article by Adobe Muse.

 


Have more questions? Submit a request