定位元素无法在移动设备上正确显示

Question

我正在编写一个脚本，供我为客户做的模因。

我有文本框用于获取内容，然后使用javascript在meme图像上显示。

文本在桌面和移动横向视图中正确显示和显示，但在纵向视图中，位置无法正确显示。

                        <div class="col-md-3">

                            <div>
                                <div class="input-group mrg30T">
                                <input type="text" class="form-control bdr md2" placeholder="Enter Your First Name" maxlength="12" id="custom_name" required data-validation-required-message="Please enter your first name">
                                </div>
                            </div>

                            <div>
                                <div class="input-group mrg10T">
                                <input type="text" class="form-control bdr md2" placeholder="Profession / Industry" maxlength="22" id="industry" required data-validation-required-message="Please enter your profession">
                                </div>
                            </div>

                            <div>
                                <div class="input-group mrg10T">
                                <input type="text" class="form-control bdr md2" placeholder=" Phone No / Email" maxlength="45" id="contact" required data-validation-required-message="Please enter your email / phone no.">
                                </div>
                            </div>  

    <div class="example" style="position: relative;">
        <!-- cropper container element -->
        <div class="default"></div>

    <div style="position:absolute; top:0; bottom:0; left:0; height:100%; width:100%;" class="template-overlay">
        <img src="" class="overlay" style="width:100%;height:94.2%;">
                                    </div>

    <div id="html-content-holder" style="position: relative;">

<div style="position:absolute;  top: -295px;  left: 120px; right: 122px"     class="text-overlay">
<label class="label_over" id="dummy_label" style=" text-transform: uppercase; font-size: 40px; font-family: 'BebasNeue'" >  </label>
                                    </div>

<div style="position:absolute;  top: -50px;  left: 118px; right: 122px" class="text-overlay">
<label class="label_over" id="industry_label" style=" text-transform: capitalize; letter-spacing: -0.7px; font-size: 15px; font-family: montserrat; font-weight: 400" >  </label>
                                    </div>

<div style="position:absolute;  top: -35px;  left: 50px; right: 50px" class="text-overlay">
<label class="label_over" id="contact_label" style=" text-transform: lowercase; letter-spacing: -0.5px; font-size: 14px; font-family: montserrat; font-weight: 400" >  </label>
                                    </div>

                                    </div>

                                </div>

所以在用户完成final image

之后看起来像这样

可在此处查看实时网站http://meme.openforbusiness.ng/

P.S：它适用于桌面和移动横向视图，我需要修复＆＃34;移动纵向视图＆＃34;