Cannot center images gallery for Mopics

[ptt81]

Hi guys, im trying to get my images gallery (the smaller thumbs images) to center inside a table data cell but it will not because the css code for mopics uses the "float: left;" which if removed it will put all the images in one very long column, looks bad. I've tried "margin: 0px auto;" but doesn't work. Is there anyway around this?

[jpf]

Change the table in your template that pertains to the display of mo-pics

[ptt81]

Thanks for the reply but that doesn't help me much, can you be more specific? change the table how?

[ridexbuilder]

I'm also interested in more detail...

[michael_s]

It is called html. Wrap it in a div. Google "how to center div"

[ptt81]

Originally Posted by michael_s

It is called html. Wrap it in a div. Google "how to center div"

Hi Michael, I can't get this to work, I have tried pretty much everything inside the "dynamic_mopics.css" where the class "screenshots" is to something like this

.screenshots {
float: left; (if I remove this, the pics will show in one column instead of rows)
padding: 10 0 10 10;
width: 20%; /* the width sets the number of images per row (i.e., 50% = 2 per row, 33% = 3 per row, 25% = 4 per row, 20% = 5 per row, etc) */
margin: option listed below;
}

here are the options I have already tried for margin alignment without any luck, may be im doing something wrong.

margin-left: auto;
margin-right: auto;
margin: 0 auto;
margin: auto 0;

Hope you could give us some better advice. Thanks

[ridexbuilder]

Been down that same route, plus a 'center' tag within product_info.tpl.php.

Resizing the table to suit the number of elements - forget it

[michael_s]

Seems to work just fine for me. Perhaps you are just going about it incorrectly, or I am not understanding what you are trying to do.

Can you post a picture or describe more clearly what you want compared to what you are getting?

[michael_s]

Here is a screenshot of 3 pics centered in the table. All I did was change the width of .screenshots to 33% in dynamic_mopics.css.

Is this what you are talking about?

[ridexbuilder]

Hi,
(That's cheating )

I've set 33%, to give 3 thumbnails in a row.
The tested product only has two additional thumbnails, so it would be preferable to have these displayed in the centre of the 'additional images' box.

Additionally, though a real 'nicety', the additional images box occupies the full width of the product info area. Setting both the header and 'text' area to 80% is trivial but how to get the complete box to be centred within the product info area, doesn't seem to be.

Thanks.

P.S. I'd buy it for 15bucks (for a runaround) but the shipping costs will be a bit gross