Reputation: 634
I have recently been working on a website using Skeleton and Foundation frameworks and have ran into something that i can't wrap my head around. The picture demonstrates my problem:
In picture 2 you can see how the website is suppose to look: each card should take up one third of the container. And it works as expected on safari, google chrome, and opera. But on firefox and internet explorer browsers i see picture number 1. Where cards are scaled enormously. I post relevant code:
the div of the card:
<div class="one-third column" >
<a href="$linkToEntry">
<table class="justoKortele">
<thead><tr><th>$entryName $discountPercent </th></tr></thead>
<tbody>
<tr data-equalizer-watch><td><img src="$entryImg"></td></tr>
<tr><td><s>$oldPrice</s>   $newPrice</td></tr>
</tbody>
</table>
</a>
</div>
My custom css for the card:
.justoKortele{
transition: all 0.3s ease-in-out;
width: 100%;
}
.justoKortele:hover{
transition: all 0.3s ease-out;
transform: scale(1.03);
box-shadow: 0 0 13px rgba(242,146,0,100);
width:100%;
}
Everything else is using styles from foundation framework. What could be the problem here? Even if i set width: 10px; in css firefox and internet explorer doesn't care and still display huge cards. I will provide more information if needed also the website is currently live at http://www.balduterminalas.lt
Thank you.
Upvotes: 0
Views: 103
Reputation: 4218
The only problem I see is max width: it is not working in firefox
Change this:
img {
max-width: 100%;
height: auto;
}
to
img {
width: 100%;
height: auto;
}
Upvotes: 3