HTML5 Image Enhancer Support Product Page

Answered

HTML5 Image Enhancer images will not center in Bootstrap 3.

Asked 24 Feb 2014 04:57:48
1
has this question
24 Feb 2014 04:57:48 David Slentz posted:
HTML5 Image Enhancer images will not center in Bootstrap 3.
I have followed your previous suggestion about using "block-center" -->

class="img-responsive dmxHTML5ImageEnhancer center-block"

This has worked before, but for some reason it will not work on this page for with the bottom four images when viewing the "md" and "sm" sizes:
dm-webcreation.com/pc2/

Replies

Replied 24 Feb 2014 07:49:33
24 Feb 2014 07:49:33 Teodor Kuduschiev replied:
Hello David,
You can't use width and height on images that have class img-responsive. You should either remove the responsive class or the width and height applied to your images...
Replied 24 Feb 2014 14:28:09
24 Feb 2014 14:28:09 David Slentz replied:
If I remove width and length from within HTML Image Enhancer, it won't let me click on "OK" until I enter a width.

Do I remove the width and height coding directly in the Source Code?
Replied 24 Feb 2014 14:32:21
24 Feb 2014 14:32:21 Teodor Kuduschiev replied:
Most probably when you added the images in DW it inserted width and height, please remove them.
Replied 24 Feb 2014 15:16:20
24 Feb 2014 15:16:20 David Slentz replied:
I deleted this line in Source Code (Image Enhancer still demands a width for some reason): style="width:350px;height:190px;" --- but it still does not center on smaller viewports where the images stack up vertically.

Here is a strange thing:
I have two websites with almost identical coding. This one maintains the image as centered (baronremodeling.com/) -- and it actually has width and height in the Image Enhancer code:
<div class="col-md-3"> <a href="about.html" class="dmxHTML5ImageEnhancerLink"><img id="imageEnh1" src="img-thumbs/1_image.jpg" style="width:350px;height:190px;" class="dmxHTML5ImageEnhancer" alt="Learn more about Baron Remodeling & Construction" /></a>

BUT the one I am working on now (dm-webcreation.com/pc2/) refuses to center the image even when I removed width and height:
<a href="about.html" class="dmxHTML5ImageEnhancerLink"><img id="imageEnh1" src="img-thumbs/1_image.jpg" class="img-responsive dmxHTML5ImageEnhancer center-block" alt="Find out more about Platform" /></a>
Replied 24 Feb 2014 15:22:08
24 Feb 2014 15:22:08 Teodor Kuduschiev replied:
Can you please remove the following rule from the supersized.css file:

* { margin:0; padding:0; }

Replied 24 Feb 2014 15:51:21
24 Feb 2014 15:51:21 David Slentz replied:
Okay. That works and my images center nicely...
BUT!! -- Now my SuperSized background has a half-inch black margin on the right hand side (except for smaller viewports).
Replied 24 Feb 2014 15:56:14
24 Feb 2014 15:56:14 Teodor Kuduschiev replied:
This will fix the issue.
ul#supersized { margin:0; padding:0; } 

Replied 24 Feb 2014 16:08:18
24 Feb 2014 16:08:18 David Slentz replied:
Wow. Yes...it works!
Wish I had your brains for that kind of trouble-shooting!

I even put this size code back in and it still centers perfectly.
style="width:350px;height:190px;"
(Image Enhancer actually placed this code there when I used it to select the image.)

Reply to this topic