CODEWITHSUNDEEP
htmlcsszurb-foundation
DaveYme
DaveYme

Reputation: 89

Target inline css on data-equalizer

I'm freelancing for a company and came across an issue I can't figure out.

I don't really want to post the URL to the page but I'll try explain as best I can.

The company is using foundation framework inside Magento.

They have 2 column side by side layout Text / image - then image text etc.

The div code is this 

    <div class="columns small-12 medium-6 type-h tile tile--one medium-push-6"    data-equalizer-watch="" style="height: 385px;">
<img class="tile__image tile__image  b-lazy b-loaded" src="image-url">
</div>

The main issue is this
data-equalizer-watch="" style="height: 385px;"

On mobile view this height changes randomly from 385 to over 570px depending on screen size. What this is doing is leave a large white space below the image as the image is only 385px in height.

I can't control the div from expending to this size. I've tried using the important tag to force a max-height but can't.

I don't have access to the source code. Just the page in question inside Magento.

Upvotes: 0

Views: 170

Answers (1)

Gaz McGuffman
Gaz McGuffman

Reputation: 11

If you dont want it to affect mobile just add this.....

data-equalize-on="medium" to the surrounding div with data-equalizer on it

Upvotes: 0

Related Questions