CODEWITHSUNDEEP
htmlcsszurb-foundation
Justas Sakalauskas
Justas Sakalauskas

Reputation: 634

Problems with grid based layout in HTML and CSS

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:

enter image description here 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> &nbsp $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

Answers (1)

Luthando Ntsekwa
Luthando Ntsekwa

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

Related Questions