Odd Col Padding, possibly image padding.

[barefootMarc]

So i’ve been playing around with col and max widths and all that fun stuff, and i’ve come across a bit of a hic-up.

I’ve placed in a col 3 images. One set with a width and height of 288px, and two beneath it with the same size, except different z-index. The idea is set the row to position:relative, the 288px placeholder image as normal (or no css), and the two beneath as roll-overs with a position:absolute all nested in a row with the Relative position value. I’ve done this before with no problems, but For some reason i’m getting a weird padding. If you check the link of image provided you will see that the images inside the div are not centered.

Worst case scenario I just write up some html and drop it in, but ideally I would like to do this with the theme.

Any suggestions?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try adding this to your custom css:

.collective_agreements img {
  left: 50%;
  margin-left: -175px;
}

– Kyle

[barefootMarc]

Hi Kyle,

Unfortunately that only works for desktop view. As the screen shrinks down it throws it off in the other direction. On mobile and ipad the icon doesn’t even show.

I’ll keep at it.

-M

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Ahh

Unfortunately as all of this is custom and set up pretty complicated, I’m afraid it’s beyond our scope of support as we can only help with basic customisations.

– Kyle

[barefootMarc]

So I think I found a work around. Instead of using the image element, i’m using a text block.

Row:normal
Col:Relative
text:absolute
text:absolute
spacer:normal

Works, except for mobile, where it floats everything left.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Ok great!

– Kyle