Drag the scrubber on the breakpoint bar, and place it at the point where you want to add the breakpoint.
Last updated on
May 16, 2021 01:51:56 PM GMT
|
Also Applies to Adobe Muse CC (2015)
Read this article to know more about breakpoints. Learn how to pin and resize objects for responsive layout, and to format text in breakpoints.
Note:
Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service FAQ.
In a responsive design, a single layout of objects and text may not suit all screen sizes. Images, text, widgets, and forms may get repositioned at different breakpoints. The frames may go out of the page width, objects may bump over one another, or the clarity of text may be reduced. Images, text, widgets, and forms need to be repositioned at different breakpoints. Therefore, thoughtfully laying out objects and formatting text, so that they appear well laid out in different screen sizes, becomes imperative.
After you design your page, you can use the scrubber to preview your layout in different screen sizes. If you see the need to lay out your objects differently at specific browser widths, you can add breakpoints.
Read on to know more about breakpoints and how to design your layout effectively, in Adobe Muse responsive layout.
What are breakpoints?
Breakpoints in a responsive layout represent the different browser widths in pixels. Breakpoints allow you to visualize your design in different browser widths, and test how the objects in a page respond to the change in browser widths.
Add breakpoints
By default, a new site in Adobe Muse contains a breakpoint for desktops (960 pixels width). You can start designing your layout for this width. When you complete the design, you can preview the layout at various widths using the scrubber. When you do so, you can see and record the width at which the design breaks. For example, a line of text gets split into two, or images that were in a row get stacked up vertically. These are the widths that need additional breakpoints. After adding the required breakpoints, you can tweak the design so that the objects are laid out nicely.
At the back end, for every breakpoint, Adobe Muse adds a corresponding media query declaration to your web page. Media queries is a CSS3 module that allows content rendering to adapt to different screen sizes. Most of the modern browsers can interpret the media queries corresponding to these breakpoints. When users view your web page on various devices, the most appropriate media query and the corresponding design layout is picked up by the browsers and displayed to users.
-
-
Click
on the breakpoint bar. Notice that a new breakpoint is added on the breakpoint bar. You can also see the browser width of the breakpoint.
Similarly, add breakpoints wherever necessary on the breakpoint bar, to set specific browser widths.
When you click a breakpoint, the active breakpoint is filled with color. The other breakpoints are grayed out.
Note:You can also add breakpoints by placing Library items with breakpoints in your Design view. Open the Library Panel, select the object that you want to place, click the + symbol next to the object, and drag the object into the Design view.
Where should I add my breakpoints?
You can add breakpoints to master pages as well as individual pages. When you add breakpoints to an individual page, the breakpoint values are applied only to that particular page.
When you add breakpoints on a master page, you can choose to apply whichever breakpoints you require, on the individual pages. The breakpoints from master pages appear as small triangles on the individual pages. You simply need to click the plus sign (+) to activate those breakpoints on the individual pages.
Consider this scenario. When you lay out your site, you may want to add specific breakpoints for phones. You can add appropriate breakpoints on the master page, so that they are available in the individual pages. When you further design the individual pages, you can get these breakpoints in these pages with a single click.
Note:
When you apply a different master page to an individual page, the breakpoints from the old master page are replaced with the breakpoints from the new master page.
Edit breakpoints
-
On the Breakpoint bar, drag and place the scrubber at the desired breakpoint value. This is your modified breakpoint location.
-
If you want to view or edit the breakpoint color, right-click the breakpoint and select Breakpoint Properties, or double-click on the breakpoint.
You can also modify the breakpoint color, page width, height, and margin values from this window.
Modify breakpoint color, breakpoint values using the Breakpoint Properties dialog box. -
Click OK to save your changes.
Note:
You cannot edit the master page breakpoints from the individual pages.
Delete breakpoints
-
To delete a breakpoint, perform one of the following steps:
- Click X on the left side of the active breakpoint.
- Right-click on the breakpoint bar, and select Delete Breakpoint.
When you delete a breakpoint, the corresponding layout changes, and the text settings for the breakpoint are also deleted.
Click the x symbol to delete the breakpoint. 
Right-click and delete breakpoints. Note:You cannot delete a master page breakpoint from an individual page.
Shift between breakpoints
From your current breakpoint, you can shift to the next or the previous breakpoints. To go to the previous or the next breakpoint, do the following:
- Windows users:
- Previous breakpoint - press Ctrl + Shift + 5
- Next breakpoint - press Ctrl + Shift + 6
- Previous breakpoint - press Ctrl + Shift + 5
- Mac OS users:
- Previous breakpoint - press Cmnd + Shift + 5
- Next breakpoint - press Cmnd + Shift + 6
- Previous breakpoint - press Cmnd + Shift + 5
Work with objects in a responsive layout
You can use the following options to ensure that your layout looks good at all the breakpoints:
- Show/hide objects: You can optionally hide an object in a breakpoint while choosing to show it in another breakpoint. For more information, see Show or hide objects.
- Position objects differently in different breakpoints: You can place a single object at different positions in different breakpoints. For more information, see Position objects in responsive web design.
- Use responsive pinning: You can decide which of the objects are to be static and which of them are to be fluid. You can pin the static objects so that they stay at the same position at all breakpoints. For more information, see Responsive Pinning.
- Resize objects: You can size an object differently in each breakpoint. You can also set an object to automatically adjust its size based on the width of the page. For more information on resizing objects, see Resize objects.
- Formatting text for different breakpoints: You can format text differently in different breakpoints to increase the clarity and readability of text in different browser widths. For more information, see Formatting text in responsive layouts.
Show or hide objects
Consider this scenario: you have inserted a traditional menu for a desktop. But, this menu occupies way too much space on the tablet screens. A sandwich menu or an accordion works better for tablet devices.
Handling such scenarios while designing responsive websites in Adobe Muse is simple. You can choose to show a traditional menu for the desktop view and a sandwich menu for tablet devices, as show in the following images.
To show or hide objects in your Adobe Muse project:
-
Insert all the objects that you require, including those objects that you want to hide in some breakpoints.
-
Drag the scrubber to go to a specific breakpoint view.
-
Right-click the object that you want to hide, and click Hide In Breakpoints.
The object is hidden in the current breakpoint view, but is visible in other breakpoints. If you want to hide the object in all the other breakpoints instead, click Hide In Other Breakpoints. You can later show the object in specific breakpoints using the Layers panel.
Hide objects in breakpoints Now, lay out the objects that are visible in the breakpoint view.
-
Go to the breakpoint view in which you want to show the object that you hid previously. You can drag the scrubber to do so.
-
Click the Layers panel and locate the layer of the object that you want to unhide. You may have to drill down different layers to locate your object layer.
Use the Layers panel to show/hide objects -
Click the first column corresponding to the object layer. A small, black dot appears to indicate that the object is now visible in the current breakpoint view.
Click the first column to show or hide objects. To unhide the object across all the breakpoints, right-click the object and click Show In Other Breakpoints.
Position objects
You can position objects differently in different breakpoint views. For example, you can position images horizontally in the desktop view while you can position the images vertically in the mobile view.
Adobe Muse remembers the position of objects and displays it accordingly when the screen size changes.
To move your objects across breakpoints, do the following:
-
Select the breakpoint at which you want to position your object.
-
Drag and place your object at the desired location.
Note:When you lay out objects, remember to check the distance between the objects and the distance between the object and the edge of the browser. You may need to adjust object positions, or add more breakpoints to address the design problems that occur between breakpoints.
Moving multiple objects as a group
You can move a group of objects together in your responsive layout. When you want to move a group of vertically aligned objects, all you need to do is to select the object on top. You will notice the vertical handle appear in the left margin in Adobe Muse.
When you click the handle and move it up or down, you will notice your selected object and all the objects below it moving as a group.
Place objects with breakpoints
You can add a set of breakpoints by placing a Library item with breakpoints, in your Design view. Open the Library panel (Windows > Library). Select the item that you want to add to the page. Click the plus symbol next to the item and drag the item to the Design view.
Notice a set of breakpoints that are automatically added to your page. If you have already added breakpoints to your page and if you add a Library item with breakpoints, all the breakpoints are activated in your page.
You can use Library items with breakpoints to quickly replicate breakpoints between different pages, and even between different .muse files.
Pin objects
In Adobe Muse, if you want to make certain objects static, you can use pinning. You can pin an object either to a page or to a browser:
- Pin objects to browser: You can pin an object to the browser if you want the object to be persistent even when you use the browser scroll bar. For example, a menu bar that is persistent even when you scroll up or down. To know more about pinning objects to the browser, see this link.
- Pin objects to page: You can pin an object to a page if you want the object to remain fixed with respect to the web page. For example, a company logo that always appears in the upper-right corner of the web page.
Read on to understand how you can pin an object to a page in responsive design.
Note:
To determine whether you want to pin an object, use the scrubber and view the page at various browser widths. If you still feel you want to pin an object to your page, perform the following steps:
-
Select the object that you want to pin.
-
In the Pin option on top, select one of the boxes to pin your object to the page.
Use the Pin menu to pin objects in a responsive layout. -
Pin the object to a page in one of the following ways:
- Pin to Left
: Select this box if you want to pin an object to the left of the web page. The distance between the edge of the browser and the left of the object remains constant.
- Pin to Center
: Select this box if you want to pin an object to the center. The distance between the left and top edge of the object and the edge of the browser remain a constant.
- Pin to Right
: Select this box if you want to pin an object to the right of the web page. The distance between the edge of the browser and the right of the object remains constant.
For example, if you have a button like Pre-Order Now that needs to appear on the right corner of the page across all the breakpoints, you must select the button and pin the button to right as shown in the image.
Click the box on right to pin the object to right. When you pin an object to a page, Adobe Muse displays dotted lines from the object to indicate the Pin to Page position. In the following image, see the dotted line that extends to the right edge of the page. This indicates that the object is pinned to the right side of the page.
Dotted lines indicate the Pin to Page position. - Pin to Left
-
Use the scrubber to view the layout in different page widths. Check to see if the pinning affects the page layout as the page resizes.
Resize objects
-
Go to the breakpoint view in which you want to resize the object.
-
Right-click the object, and select Resize > <Resize option>.
Note:The resize option is different for different objects. For example, you can resize an image by width and height in a responsive layout, while you can resize a text box only by width.
Objects that are not fluid do not have the Resize option.
-
Drag and resize the object for the current breakpoint.
For example, in the first image, notice that the image is going out of width at a breakpoint of 768 pixels. You can drag and resize the image to fit the page width, as shown in the second image.
Image is out of page width. 
Drag and resize objects for different breakpoints. -
Preview this change in a browser. Resize your browser until your browser width reaches your breakpoint value. Notice the change in the object size after your browser width reaches the breakpoint value.
Note:
If items within a State Button or any other widget container are set to be fluid, they are repositioned and/or resized when their container is resized.
Copy the size and position of objects
If you want to copy the size and position of an object across different breakpoints, perform the following steps:
-
Right-click the object that you want to copy.
-
Do one of the following:
- Select Copy Size And Position To > <specific breakpoint value>, to apply the current object size and position for the specific breakpoint.
- Select Copy Size And Position To > All Breakpoints, to apply the current object size and position across all the breakpoints.
Formatting text in responsive layout
In responsive design, handling text for various browser widths is important so that it is clear and readable. Text placed in one breakpoint view may wrap abruptly in another breakpoint view. Unwanted line breaks may also appear when you switch the breakpoints.
Adobe Muse lets you format text differently for different breakpoints. For example, you can choose to have font size 20 pt for tablets and 15 pt for mobile devices.
To format text in responsive design, Adobe Muse offers a Text Formatting icon in the panel where you also find the Crop tool and the Selection tool. There are two options in this icon, and you can choose either of the two options to format your text.
You can choose the Format Text Across Breakpoints option to format text across all the breakpoints on a page. When you choose this option, you need to format the text only at one breakpoint view. The text is automatically formatted across the other breakpoints.
On the other hand, if you need to format text for a specific breakpoint, you can choose the Format Text On Current Breakpoint option. For example, you can choose to increase the text size to 24 while laying out text for mobiles.
The text formatting is remembered and displayed accordingly when the website is viewed on different browser widths.
Format text in responsive layout
-
Go to the required breakpoint view.
-
Select the text box and drag to resize it. Your text reflows as you resize the text box.
Note:The right boundary of the text box defines the extent to which the text will flow in width as you resize the text box.
-
To format text, select the text that you want to format, and click one of the following:
- Format Text Across Breakpoints to format the text across all the breakpoints.
- Format Text On Current Breakpoint to format the text for the current breakpoint only.
Both these options are available in the left panel where you select the Text tool or the Crop tool.
Format text in responsive design A. Format Text Across Breakpoints B. Format Text on Current Breakpoint
Note:The format text option in responsive layout only changes the formatting of the text. You cannot change the words or the content for each breakpoint.
Copy text formatting across breakpoints
If you want to copy the size and position of text across different breakpoints or browser widths, perform the following steps:
-
Select the text that you want to copy.
-
Do one of the following:
- Right-click and select Copy Text Formatting To > <specific breakpoint value>, to apply the current text attributes for that particular breakpoint.
- Right-click and select Copy Text Formatting To > All Breakpoints, to apply the current text attributes across all the other breakpoints.
Preview your layout at every breakpoint by using the scrubber. Add breakpoints, if necessary, to optimize your layout for different browser widths.
Applying scroll effects in a responsive layout
You can add scroll effects in a responsive layout. Scroll effects are only supported with fixed breakpoints. Fixed breakpoints indicate that your layout is fixed at that page width. Add a fixed breakpoint, select the object to which you want to apply scroll effects, and then configure the Scroll Effects settings.
-
Open your Adobe Muse page where you want to add the scroll effect. For example, you may want to add scroll effects for the navigation and the background image in the header.
-
When you open the responsive layout, notice the breakpoints on your page. These breakpoints are fluid as indicated by an icon with arrows both ways.
Fluid breakpoints indicated by a double arrow icon If you now view the Scroll Effects panel, you can see that the option is disabled.
Scroll effects are disabled for fluid breakpoints -
You must add a fixed breakpoint to enable Scroll Effects. To add a fixed breakpoint, click on the Breakpoint bar, and click Add a Breakpoint.
-
Choose Fixed Width from the drop down and click OK.
Add a fixed width breakpoint 
Notice the fixed breakpoints with a square icon Notice that the fixed breakpoint on your page which is indicated by a square. When you view the page at a browser width of 1225 pixels or beyond, the page remains fixed as seen at 1225 pixels. The layout does not become fluid at this breakpoint.
-
Select the object for which you want to apply the scroll effects, and configure the settings for Scroll Effects.
Apply scroll effects for selected objects Note:You can apply Scroll Effects only when you are at the fixed breakpoint and not at the other (fluid) breakpoints.
To know how to add and use scroll effects in Adobe Muse, see Applying Scroll Effects in Adobe Muse.
FAQ
If you have a specific device for which you want to design your site, you can add the appropriate breakpoint. However, users may view your site from any device, having any screen size. It is therefore recommended to add breakpoints only where your design breaks. This ensures that your site looks well laid-out in any device.
Master page breakpoints appear as white triangles in your individual pages. To enable these breakpoints in individual pages, click the white triangle on the breakpoint bar, and then click the plus (+) sign.
Another way to easily carry over breakpoints from a Master page to a specific page is to copy a Master page element, switch to the page you want to apply the breakpoints, select Edit > Paste with breakpoints, then delete the pasted item from the canvas. Although the item is deleted, the breakpoints from the Master page remain.
Text boxes do not scale, and may overlap with one another if they are not "Fluid". To make the text boxes fluid, right-click each of the text box, and select Resize > Responsive Width.
You may find extra space or a white space due to several reasons such as a sticky footer, or a hidden object. For more details on how to resolve this issue, see this article.
Whenever you see a gray area in your preview, check for an external object or a hidden object placed outside the page. To select all the objects, click View > Show Frame Edges. You can also zoom out and view the placement of all the objects. Check for a hidden object or an external object, and place the object within your layout to resolve this issue.
All the widgets in Adobe Muse are currently not responsive. To know the responsive behavior of each widget, see this table.
Sign in to your account