Menu icon Foundation
Set shrink for medium-up

Is it possible to make a grid-block shrink for medium and above? I'd like my block-list to be the full width of the screen on small!

shrinkgrid-block

Is it possible to make a grid-block shrink for medium and above? I'd like my block-list to be the full width of the screen on small!

Rafi Benkual over 2 years ago

Hmm, there isn't. I'm curious why it would be needed? What's the use case? Maybe if we understand a good use for this it can be added.

Matt Mac over 2 years ago

I have a show-for-medium grid-block that contains a google maps iframe, and a grid-block shrink that contains a block-list. On medium and above, the block-list grid-block shrinks to size, allowing the map grid-block to take up the remaining space. On small, there is not sufficient space for the map, so I only show the block-list This also means that on a small screen, the block-list grid block still shrinks!

I hope I explained that well! Thanks

Here is my code:

---
name: browse
url: /browse
---
<div class="show-for-medium grid-block vertical">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d81401.91639767708!2d-4.112569950000009!3d50.38874245!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x486c8d530e95ea3d%3A0x3b282cb5cef58593!2sPlymouth!5e0!3m2!1sen!2suk!4v1424268690744" width="100%" height="1200px" frameborder="0" style="border:0"></iframe>
</div>

<div class="grid-block shrink">
    <div class="grid-content">
        <section class="block-list">
            <ul>
                <li class="with-chevron">
                    <a zf-toggle="antiques">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Collectables and antiques</span>
                    </a>
                    <div ng-include="" src="templates/antiques.html"></div>

                </li>
                <li class="with-chevron">
                    <a href="#">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Electronics</span>
                    </a>
                </li>
                <li class="with-chevron">
                    <a href="#">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Fashion</span>
                    </a>
                </li>
                <li class="with-chevron">
                    <a href="#">

                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Home and garden</span>
                    </a>
                </li>
                <li class="with-chevron">
                    <a href="#">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Jewellery and watches</span>
                    </a>
                </li>
                <li class="with-chevron">
                    <a href="#">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Motors</span>
                    </a>
                </li>
                <li class="with-chevron">
                    <a href="#">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Sporting goods</span>
                    </a>
                </li>
                <li class="with-chevron">
                    <a href="#">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Toys and games</span>
                    </a>
                </li>
                <li class="with-chevron">
                    <a href="#">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Books comics and magazines</span>
                    </a>
                </li>
                <li class="with-chevron">
                    <a href="#">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Health and beauty</span>
                    </a>
                </li>
                <li class="with-chevron">
                    <a href="#">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Musical instruments</span>
                    </a>
                </li>
                <li class="with-chevron">
                    <a href="#">
                        <span class="left stars block-list-label"></span>
                        <span class="block-list-label">Business office and industrial</span>
                    </a>
                </li>

            </ul>           

        </section>

    </div>

</div>


Wil Grace over 2 years ago

+1 one for this - I'd like full-width on small and contained on medium-up

Rafi Benkual over 2 years ago

That's a pretty specific use case for which you can write CSS for right?

The mixin makes this easy

Not sure if it's something that needs to be added to the framework.

@media breakpoint {medium} {
  @include grid-block(
    $size: shrink
  }
}

Albert about 1 year ago

@Rafi Benkual 

I was also looking for a medium-shrink solution.

Obviously I can fix this with a css work-around but I don't see why you describe this as a 'pretty specific use case'. The shrink is just a width that should be able to behave differently in small, medium and large.

When, for example, on medium up, I have a three column layout:

Image, tekst, image

like this:

Column shrink, column, column shrink

It's not unlikely to have them stacked on small:

Image,

tekst,

image

 I would expect this:

<div class="row">
<div class="columns small-12 medium-shrink">
<img src="image1.jpg">
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus.
</div>
<div class="columns small-12 medium-shrink">
<img src="image2.jpg">
</div>
</div>

 

Cheers,

Albert

 

Jarryd Fillmore about 1 year ago

Great answer Albert!

Will Fairhurst 11 months ago

I was looking for a similar thing this morning and have put together a custom solution.  If anyone is still looking to achieve this (and is using SASS) then you could use the following to create breakpoint specific shrink styles.

/* =============================================================================
Custom Shrink Classes
========================================================================== */

@each $breakpoint in $breakpoint-classes {
  @if $breakpoint == small {
    // Do nothing
  } @else {
    @include breakpoint($breakpoint) {
      .#{$breakpoint}-shrink {
        flex: 0 0 auto;
        max-width: 100%;
      }
    }
  }
}

Once compiled you end up with the ability to use classes such as 

.medium-shrink or .large-shrink

This will work for custom breakpoints as well as any predefined ones.

Hope that helps someone.

Will

 

Albert 11 months ago

Cool!