Menu icon Foundation
Image Resizing Issues

We are having an issue of our small images getting larger than it's actual size when the screen gets small. Any idea why this would be? Even when we specifically call out the size of the image in the code it happens.

 

Here's the code: 

<row class="collapse">

  <columns small="4" large="1; large-offset-5;">

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/facebook-128.png" href="google.com" alt="Facebook" style="float:right; width:30px">

</columns>

  <columns small="4" large="1">

    <center>

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/twitter-128.png" href="google.com" alt="Twitter" style="width:30px;">

</center>

</columns>

  <columns small="4" large="5" style="float:left;">

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/youtube.jpg" href="google.com" alt="YouTube" style="float:left; width:30px;">

</columns>

</row>

 

question

We are having an issue of our small images getting larger than it's actual size when the screen gets small. Any idea why this would be? Even when we specifically call out the size of the image in the code it happens.

 

Here's the code: 

<row class="collapse">

  <columns small="4" large="1; large-offset-5;">

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/facebook-128.png" href="google.com" alt="Facebook" style="float:right; width:30px">

</columns>

  <columns small="4" large="1">

    <center>

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/twitter-128.png" href="google.com" alt="Twitter" style="width:30px;">

</center>

</columns>

  <columns small="4" large="5" style="float:left;">

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/youtube.jpg" href="google.com" alt="YouTube" style="float:left; width:30px;">

</columns>

</row>

 

Hans McMurdy over 3 years ago

For email, you may want to set the height="30" rather then style="height:30px;".