Home / Articles / Responsive Design in Adobe Dreamweaver CC

Responsive Design in Adobe Dreamweaver CC

Article Description

Follow along with Adobe expert Brian Wood’s tutorial, and soon you'll be creating your responsive designs in Dreamweaver CC.

Like this article? We recommend

Adobe Dreamweaver CC Classroom in a Book

Adobe Dreamweaver CC Classroom in a Book

$59.99

Hiding Content from One of the Devices

Hiding Content from One of the Devices

On most mobile sites, you are going to want to have less content showing. Generically speaking, mobile design usually is a single column and simpler. Lastly, you will learn how to hide content from one of the devices.

  1. Click the Mobile Size icon in the lower-right corner.
  2. Insert the cursor after the nav element (just to the right of it). In the Insert panel, click Div. In the Insert Div dialog box, add a class name of quotes, make sure that the Insert As Fluid Element is selected, and click OK (see Figure 27).
  3. Figure 27 Insert a quotes div

  4. The div should now appear in all three views (Mobile, Tablet, and Desktop). Next, you will hide it from the mobile view but leave it showing in the tablet and desktop views.
  5. With the mobile view showing, make sure that the cursor is in the new “quotes” div. Click the eye icon with the slash through it to hide the div in mobile view (see Figure 28).
  6. Figure 28 Hide the quotes div

  7. View the page in the tablet and desktop views to see that the div is still showing.
  8. Choose File > Save to save the file.
6. Final Thoughts | Next Section Previous Section

There are currently no related articles. Please check back later.