insert responsive gmail html signature

Question

My html signature in browser is quite good with following design:

[   ] name 
[img] company
[   ] email

but when I copy to gmail signature, it seems to be broken! the image stands in wrong position!

[   ]
[img]
[   ]
name
company
email

please help me to resolve this problem!

ps: I have not enough reputations to post image.

<div class = "col-lg-12 col-md-12" style ="display:inline">
<div class = "col-xs-1 col-sm-1" style = "padding:0 0 0 0;display:inline">
    <img src="http://i.imgur.com/8wclWry.png" width="65px" height="65px" id="sigPhoto"> 
</div>


<div class = "col-lg-11 col-md-10" style = "padding:0 0 0 0; display:inline">
    <p class = "col-lg-11 col-md-10" style = "padding:0 0 0 0">  
        <span id = "name">  
            Ta Quynh Giang <!-- Name here-->
        </span>
    </p>
    <p class = "col-lg-11 col-md-10" style = "padding:0 0 0 0; display:inline">
        <span>
            Marketing Manager - ABIVIN Vietnam, JSC.
        </span>
    </p>
    <div class = "col-lg-11 col-md-10" style = "padding:0 0 0 0; margin-top: 5px; display:inline">
        <div class = "col-md-2 col-sm-4 info" style = "padding:0 0 0 0 ;display:inline">
            <span id = "head-info"> M </span>&nbsp;&nbsp;+84 168 992 1733
        </div>
        <div class = "col-md-2 col-sm-4 info" style = "padding:0 0 0 0; display:inline">
            <span id = "head-info"> W </span>&nbsp;&nbsp;<a href = "abivin.com">http://abivin.com</a>
        </div>   
    </div>
    <div class = "col-lg-11 col-md-10" style = "padding:0 0 0 0; margin-top: 5px; display:inline">
        <div class = "col-md-2 col-sm-4 info" style = "padding:0 0 0 0; display:inline">
            <span id = "head-info"> E </span>&nbsp;&nbsp;[email protected]
        </div>
        <div class = "col-md-3 col-sm-5 info" style = "padding:0 0 0 0; display:inline">
            <span id = "head-info"> A </span>&nbsp;&nbsp;&nbsp;R503, 35 Lang Ha, Hanoi, Vietnam
        </div>   
    </div>
</div>

Answer 1

I think you were missing a closing div tag to the whole code block ( certainly in the code posted above anyway ) which would throw the html alignment out in some instances. I have corrected that in the following - though I cannot test under the circumstances that you are using the code.

<div class='col-lg-12 col-md-12' style='display:block'>
    <div class='col-xs-1 col-sm-1' style='padding:0;display:inline'>
        <img src='http://i.imgur.com/8wclWry.png' width='65px' height='65px' id='sigPhoto'> 
    </div>


    <div class='col-lg-11 col-md-10' style='padding:0; display:inline'>
        <p class='col-lg-11 col-md-10' style='padding:0'>  
            <span id='name'>  
                Ta Quynh Giang <!-- Name here-->
            </span>
        </p>
        <p class='col-lg-11 col-md-10' style='padding:0; display:inline'>
            <span>
                Marketing Manager - ABIVIN Vietnam, JSC.
            </span>
        </p>
        <div class='col-lg-11 col-md-10' style='padding:0; margin-top: 5px; display:inline'>
            <div class='col-md-2 col-sm-4 info' style='padding:0 ;display:inline'>
                <span id='head-info'> M </span>&nbsp;&nbsp;+84 168 992 1733
            </div>
            <div class='col-md-2 col-sm-4 info' style='padding:0; display:inline'>
                <span id='head-info'> W </span>&nbsp;&nbsp;<a href='http://abivin.com' target='_blank'>http://abivin.com</a>
            </div>   
        </div>
        <div class='col-lg-11 col-md-10' style='padding:0; margin-top: 5px; display:inline'>
            <div class='col-md-2 col-sm-4 info' style='padding:0; display:inline'>
                <span id='head-info'> E </span>&nbsp;&nbsp;[email protected]
            </div>
            <div class='col-md-3 col-sm-5 info' style='padding:0; display:inline'>
                <span id='head-info'> A </span>&nbsp;&nbsp;&nbsp;R503, 35 Lang Ha, Hanoi, Vietnam
            </div>   
        </div>
    </div>
</div>