htmlcsszurb-foundationzurb-foundation-6

Stackable media objects not behaving correctly in Foundation

I have a structure like so:

<div class="grid-container fluid">
    <div class="grid-x grid-margin-x fluid" id="content">
        <div class="cell medium-offset-1 medium-7 small-12>
            <div class="content-section">
                <div class="media-object stack-for-small">
                    <div class="media-object-section"> # object1
                        <div class="thumbnail">
                            <img src="">
                        </div>
                   </div>
                   <div class="media-object-section"> # object 2
                   [....]      
                   </div>
                </div>
            </div>
        </div>

        <div class="cell medium-3 columns small-12">
        Upcoming events...
        </div>
    </div>
</div>

For large and small screen it works as expected: the stackable items are stacked in small screens and one next to the other for large. The issue is for medium-size displays, where this happens (this is an iPad):

enter image description here

Am I overlooking something obvious?

Solution

  • By default we use the $-zf-zero-breakpoint (which is small) and compile the CSS for it there. And this applies it just to the breakpoint small and not medium or others.

    See https://github.com/foundation/foundation-sites/blob/v6.6.3/scss/components/_media-object.scss#L66 and https://github.com/foundation/foundation-sites/blob/v6.6.3/scss/components/_media-object.scss#L36

    If you need it for medium too you can either use the scss version and generate the needed styles using the media-object-stack mixin (https://get.foundation/sites/docs/media-object.html#media-object-stack) or create the needed CSS class manually.

    https://github.com/foundation/foundation-sites/blob/v6.6.3/dist/css/foundation.css#L3522

    <html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Stackable objects issues</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
</head>

<body>
  <div class="grid-container fluid">

    <div class="grid-x grid-margin-x" id="content">

      <div class="cell medium-offset-1 medium-7 small-12">

        <div class="content-section">
          <div class="media-object stack-for-small stack-for-medium">
            <div class="media-object-section">
              <img alt="alternative" src="http://151.236.37.122/media/profile_pics/P1070640b_Yrjhmqh.jpg">

            </div>
            <div class="media-object-section">
              <h3 class="profile-heading">Jonny Smith</h3>
              <h5 class="subheader">Educator, Perfor&shy;mer (indiv&shy;idual), Project manage&shy;ment / Production</h5>
            </div>
          </div>
        </div>
      </div>

      <div class="cell medium-3 small-12">

        <div class="callout small">

          <h5>Upcoming events</h5>

          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
          </ul>
        </div>

      </div>

    </div>

  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
  <script>
    $(document).foundation();
  </script>

</body>

</html>

      @media print, screen and (max-width: 63.99875em) {
    .media-object.stack-for-medium {
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
    } 
}

    I have done this at https://codepen.io/DanielRuf/pen/LYGRBpq?editors=1100 and added a few spaces and soft hyphens for better automatic text breaks.