Portland Community College | Portland, Oregon

Responsive behavior

Callout galleries will respond to changes in screen size based on the parameters you give them, but they are always 1 column on small screens. For example, you could have a gallery that is:

• 4 columns on large screens, a 2 x 2 grid on medium screens, and 1 column on small screens.
• 2 or 3 columns on large and medium screens, and 1 column on small screens.

Development info

• Stylesheet location: /_source/styles/components/_callouts.scss
• Images all need to have the same dimensions and be at least 600px wide.
• Use info callouts instead of other or mixed callout types.
• In WordPress, use the callout and callout-columns shortcodes.
• In HTML, use <div class="row callout-columns">.
  • Always use small-12. medium-x and large-x depend on the number of columns desired.
  • Don’t make more than 4 columns – they’ll be too narrow.
  • JavaScript adds an extra <div class="callout-contents"> and some inline styles. It also adds all the Equalizer attributes needed to make the columns the same height. Don’t add these elements yourself – they’ll double up and break the layout.
• Callout with individual links:

  <div class="row callout-columns"> 
    <div class="small-12 medium-x large-x columns">
      <div class="info">
        <img src="" alt="" /> <!-- optional -->
        <h4>Column 1 heading</h4>
        <p>Column 1 content <a href="">with a link</a>.</p>
      </div>
    </div>
    <div class="small-12 medium-x large-x columns">
      <div class="info">
        <img src="" alt="" /> <!-- optional -->
        <h4>Column 2 heading</h4>
        <p>Column 2 content <a href="">with a link</a>.</p>
      </div>
    </div>
    <div class="small-12 medium-x large-x columns">
      <div class="info">
        <img src="" alt="" /> <!-- optional -->
        <h4>Column 3 heading</h4>
        <p>Column 3 content <a href="">with a link</a>.</p>
      </div>
    </div>
  </div>

• Entire callouts are links:

  <div class="row callout-columns"> 
    <div class="small-12 medium-x large-x columns">
      <a href="">
        <div class="info">
          <img src="" alt="" /> <!-- optional -->
          <h4>Column 1 heading</h4>
          <p>Column 1 content</p>
        </div>
      </a>
    </div>
    <div class="small-12 medium-x large-x columns">
      <a href="">
        <div class="info">
          <img src="" alt="" /> <!-- optional -->
          <h4>Column 2 heading</h4>
          <p>Column 2 content</p>
        </div>
      </a>
    </div>
    <div class="small-12 medium-x large-x columns">
      <a href="">
        <div class="info">
          <img src="" alt="" /> <!-- optional -->
          <h4>Column 3 heading</h4>
          <p>Column 3 content</p>
        </div>
      </a>
    </div>
  </div>