WeaverPix image alignment


(Garth Poon) #1

Hi, I’m using WeaverPix to display a number of conference speakers on a page. So far, it’s working great. However, when you click on the thumbnail and open up the modal window, the image is not centered.

Is there some CSS that I can add to the page that will center the image in the modal window?

Here’s a link to the page: http://jellymarketinginc.com/digitalbuzz/speakers/


(Will Woodgate) #2

Hi @garth

Try the following CSS code in your WeaverPix page:

.modal-body {
text-align: center !important;
}

I just tried that in Chrome developer tools, and it moved the bio pictures across to below the name of the person, centred within the modal window.

Although the above code relates to text, because the images (in this instance) are inline elements, it should be feasible to align them left, right or center with CSS text-align properties. I think ordinarily the modal window probably expects there to be a bigger image in there, scaled down to fit the box. But smaller images and my suggested CSS should work fine across all browsers and devices.

-Will.


(Garth Poon) #3

Thanks @willwood! That worked perfectly! I had tried figuring it out on my own, but I was unsuccessful because I didn’t know the images were being treated as text.