From the course: Dreamweaver CC: Responsive Design with Bootstrap 4
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Resize and duplicate columns - Dreamweaver Tutorial
From the course: Dreamweaver CC: Responsive Design with Bootstrap 4
Resize and duplicate columns
- [Instructor] In this chapter, we'll explore working with rows and columns to add and lay out content on a page. We'll begin by looking at how to resize and duplicate columns. This is the page we've been working in throughout the course. Eagle-eyed viewers will notice there's an extra breakpoint here at 440 pixels in the Visual Media Queries bar. I added that to resize the text over the image. It won't be used elsewhere, so don't worry about it, or if you added a media query in a different place. Let's insert a new row after the Hero image. First, resize the document window by clicking to the right of 576 pixels in the Visual Media Queries bar. Then, select the image, and press the up arrow on your keyboard to start moving up the underlying HTML structure. First, you get the h1 heading, then the 12 column div, and finally the row. If you're unsure, you can check in the DOM panel, there it is, the row, which is the first one nested inside the Container Fluid div. Then, open the Insert…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.