Menu icon Foundation
Make callout card responsive

Hey guys I'm just starting out with Foundation and it is fantastic. 

 

I just have trouble coming up with an email design. See picture below:

I wanted to come up with those panels so I thought I'd use callouts. However, the spacing and image are weird in smaller screens. This is the code I came up with:

HTML

<row>
<columns>
<table class="callout">
  <tr>
    <th class="callout-inner" style="width: 35%;">
         <img src="http://placehold.it/192x208">
    </th>
    <th class="callout-inner" style="width: 65%;">
    <h2>Heading</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
<aside>Price 1</aside>
<aside>Price 2</aside>
    </th>
    
      </tr>
    </table>
     
    <th class="expander"></th>
  

</columns>
</row>

 

SASS/CSS

.callout {

.callout-inner {
  padding: 0;
}

.callout-inner img  {
  } 

.callout-inner p {
    font-size: 12px;
    color: #606060;
    line-height: 18px;
    margin-left: 7px;
  }
.callout-inner h2 {
  font-size: 16px;
  font-weight: bold;
  font-family: Arial;
  color: #ad0540;
  margin-left: 7px;
}

.callout-inner aside {
    width: 48%;
    float: left;
    margin-left: 7px;
    margin-bottom: 8px;
  }
}

 

Any help is greatly appreciated. Thanks!

 

questionemailResponsive

Hey guys I'm just starting out with Foundation and it is fantastic. 

 

I just have trouble coming up with an email design. See picture below:

I wanted to come up with those panels so I thought I'd use callouts. However, the spacing and image are weird in smaller screens. This is the code I came up with:

HTML

<row>
<columns>
<table class="callout">
  <tr>
    <th class="callout-inner" style="width: 35%;">
         <img src="http://placehold.it/192x208">
    </th>
    <th class="callout-inner" style="width: 65%;">
    <h2>Heading</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
<aside>Price 1</aside>
<aside>Price 2</aside>
    </th>
    
      </tr>
    </table>
     
    <th class="expander"></th>
  

</columns>
</row>

 

SASS/CSS

.callout {

.callout-inner {
  padding: 0;
}

.callout-inner img  {
  } 

.callout-inner p {
    font-size: 12px;
    color: #606060;
    line-height: 18px;
    margin-left: 7px;
  }
.callout-inner h2 {
  font-size: 16px;
  font-weight: bold;
  font-family: Arial;
  color: #ad0540;
  margin-left: 7px;
}

.callout-inner aside {
    width: 48%;
    float: left;
    margin-left: 7px;
    margin-bottom: 8px;
  }
}

 

Any help is greatly appreciated. Thanks!

 

Tim Hartwick almost 3 years ago

Hey Joe!

What's the desired effect you're looking to do on smaller screens?