#Adobe muse responsive layout code#

Use the Selection tool to center them on the page using the alignment guides.

Paste the elements you copied in step 1 on the Section 03 page of the phone layout.

Click the down arrow key to select the Section 03 phone page and then press Return/Enter to open it in Design view.

Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 03.

Select the white rounded background rectangle, the purple 03 circle, the Section 03 text frame, the contact form, and the submit button.

Click the Scratch (Desktop) tab to return to the Scratch page.

Next, you'll add the page content for the Section 03 page.

Click away from the Links dialog box to close it.

#Adobe muse responsive layout code#

You can edit the height and width values in the code to resize the map to fit a smaller screen. However, If you need to resize the dimensions of embedded HTML content in your projects, you can right-click on the content and choose HTML to view the code in the HTML window. For this sample project, the map dimensions have already been resized. If you followed along with the tutorial titled Getting Started with Muse, you'll remember that you copied the Google Map source code from the Google website and used the embedded HTML feature in Muse to paste it into the page.ДЇortunately, Google Map code already includes support for finger gestures on touch screens, so visitors with devices can interact with the map easily. The Section 02 page contains embedded HTML code that was generated on the Google Maps website to create an interactive map.

Paste the elements you copied in step 1 on the Section 02 page of the phone layout.

Click the down arrow key to select the Section 02 phone page and then press Return/Enter to open it in Design view.

Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 02.

Select the white rounded background rectangle, the green 02 circle, the Section 02 text frame, the embedded map, and the green Map button. Note: If you'd prefer to create an email link, you can enter the following format in the Hyperlink menu adding the link to the Phone button, the Section 01 page design is complete.

Press Return or Enter to save the link.

This is the format that mobile browsers recognize for telephone number links.

In the Links menu field, type tel:+1 and then a phone number, like this:.Use the Selection tool to select the Phone button.

To add a link in a mobile layout to dial a phone number, follow these steps: This is a great mobile site feature because it enables potential customers call a business very easily. When designing mobile websites, you can add a new type of link that enables the visitor to tap their screen and invoke the smartphone's phone dialer to call a number. The purpose of the Section 01 page is to provide a brief introduction to the business and make it easy for mobile visitors to call it. Use the Selection tool to center them on the page using the guides that temporarily appear.

Paste the elements on the Section 01 page of the phone layout.

Click the down arrow key to select the Section 01 phone page and then press Return/Enter to open it in Design view.

Press Command+J (Mac) or Control+J (Windows) and type the first few letters of Section 01.

The three text frames include the 01 circle, the section 01 placeholder text, and the orange Phone button. Select the white rounded background rectangle and three text frames, in the second pod from the left. Next, you'll add the page content for the Section 01 page.