Create a responsive Bootstrap layout in Dreamweaver —Part 7

Fix the Adobe Web Edge Fonts problem with the editable regions

When you add an Adobe Edge Web font later after you've set up your template and defined editable regions, sometimes you'll receive an error message about the change not working because it falls outside the editable region. Sometimes this error will resolve itself once you close and reopen Dreamweaver. If it doesn't, though, try the fix below.

To fix the Adobe Web Edge Fonts problem with the editable regions

  1. Open your template file in Live view and then in Split view.
  2. On or around line 22, before the opening <script> tag, select the --> characters, and then press Ctrl+X (Mac: Command+X) to cut them.
  3. At the end of the same line (line 22 or thereabout), after the closing </script> tag, press Ctrl+V (Mac: Command+V) to paste the item you just cut in the previous step.
  4. Save your template file, and then click Update.
  5. Select and then cut the same --> characters, and then paste them back in their original location.
  6. Save your template file, and then click Update.

The problem should now be resolved. You may have to repeat this process for any new Adobe Edge Web Fonts you add to the project.

Create a sticky footer

On short webpages, especially on a widescreen monitor, the footer may come up into the middle of the page. If the page and footer both have a white background, the effect isn't as noticable. But if the footer has a background color, background image, or background gradient, the effect doesn't look as good. A sticky footer moves the footer down to the bottom of the viewing area on short pages.

To modify the template

  1. Open your template file in Design view.
  2. Click anywhere on the webpage, and then in the tag selector, click the body rule.
  3. On the Insert menu, click Div.
  4. In the Insert list, make sure Wrap around selection is selected, and then in the class box, type iefix.
  5. Click OK.
  6. On the File menu, click Save All, and then update all the pages based on the template.

To modify the body rule

  1. In the CSS Designer, make sure the Source is set to your style sheet.
  2. Under @Media, make sure GLOBAL is selected.
  3. Under Selectors, click the body rule.
  4. In the CSS Designer panel, under Properties, click the Layout button Layout button.
  5. In the margin box, type 0.
  6. In the height box, type 100%.

To create the .iefix rule

  1. In the CSS Designer, make sure the Source is set to your style sheet.
  2. Under @Media, make sure GLOBAL is selected.
  3. Under Selectors, click the body rule.
  4. Next to Selectors, click the Add Selector button Add Selector button.
  5. In the selector name box, type .iefix, and then press Enter.
  6. In the CSS Designer, under Properties, click More .
  7. In the add property box, type display, and then in the add value box, type flex.

To modify the .container rule

  1. In the CSS Designer, make sure the Source is set to your style sheet.
  2. Under @Media, make sure GLOBAL is selected.
  3. Under Selectors, click the .container rule.
  4. In the CSS Designer, under Properties, click More .
  5. In the add property box, type display, and then in the add value box, type flex.
  6. Press Tab.
  7. Continue adding properties and values, as listed in the table, pressing Tab after each entry:

    add property add value
    margin 0 auto
    min-height 100vh
    flex-direction column
    max-width 1200px

To add a rule for article.row

  1. In the CSS Designer, make sure the Source is set to your style sheet.
  2. Under @Media, make sure GLOBAL is selected.
  3. Under Selectors, click the nav.row ul.nav.navbar-nav a:hover rule.
  4. Click the Add Selector button Add Selector button, and then name the new selector article.row.
  5. In the CSS Designer, under Properties, make sure you're still in the More category .
  6. In the add property box, type flex-grow, and then in the add value box, type 1.
  7. On the File menu, click Save All.

To preview the sticky footer in a web browser

Note The sticky footer works in all modern browsers, including Apple Safari, Google Chrome, Microsoft Internet Explore, Microsoft Edge, and Mozilla Firefox.