Menu icon Foundation
Does not collapse on small

 

I have a basic image where I want collapsed margins. I use the `collapse` class and everything works fine while large, but when I shrink the browser and the breakpoint hits, the margins are no longer collapsed. 

 

<container>
    <row class="collapse">
      <columns>
        <img src="http://placehold.it/580x50/663399">
      </columns>
    </row>
</container>

 

gridcollapsefull-width

 

I have a basic image where I want collapsed margins. I use the `collapse` class and everything works fine while large, but when I shrink the browser and the breakpoint hits, the margins are no longer collapsed. 

 

<container>
    <row class="collapse">
      <columns>
        <img src="http://placehold.it/580x50/663399">
      </columns>
    </row>
</container>

 

Rafi Benkual over 2 years ago

The collapse class affect columns. Is the padding you're seeing on another element? What does the inspector show?

Corey Schaaf over 2 years ago

This may be a result of not having the height and width attributes of the image explicitly called out on the img tag.  Have you tried adding the height and width to the image? 

<container>
    <row class="collapse">
      <columns>
        <img src="http://placehold.it/580x50/663399" height="50" width="580">
      </columns>
    </row>
</container>