ช่วยดู codeให้หน่อยครับ

[kunnarakkup]

https://testtep.000webhostapp.com/tep/

ตรงที่เป็นสินค้าทีตอนเมาส์ไปชี้ที่ภาพแล้วมันจะขึ้น caption อะครับ เปิดบน pc ไม่มีปัญหา แต่ตอนเป็นบนมือถือ มันต้องกดตรงมุมซ้ายบนอะครับถึงจะขึ้นcaption แต่พอขึ้นปุ่ป เว็บมันจะเด้งขึ้นไปข้างบนอะครับต้องเลื่อนลงมาใหม่ ไม่รู้จะแก้ตรงใหน ช่วยทีนะครับ

โค้ด เลือก ขยาย

   <section id="recent-works">
       <div class="container">
           <div class="center wow fadeInDown">
               <h2>ผลิตภัณฑ์ของเรา</h2>
               <p class="lead">เราสามารถทำการผลิต ผลิตภัณฑ์ยางขึ้นรูปทุกชนิด ตามแบบวาด หรือ ตามตัวอย่าง  รวมถึงการจัดหาวัตถุดิบและข้อมูล เพื่อให้สอดคล้องตาม
ข้อกำหนดสากลต่างๆ เช่น RoHS, REACH, SOC หรืออื่นๆตามความต้องการของลูกค้า ซึ่งผลิตภัณฑ์ของเราจะรองรับในทุกกลุ่มอุตสาหกรรม โดยเราได้แบ่งออกเป็น 4 กลุ่มหลัก</p>
           </div>  </div>  
                       <div class="row">
               <div class="col-xs-12 col-sm-4 col-md-3">
                   <div class="recent-work-wrap">
                       <img class="img-responsive" src="images/product/recent/item1.jpg" alt="">
                       <div class="overlay">
                           <div class="recent-work-inner">
                               <h3><a href="#">Automotive Rubber Part</a> </h3>
                               <p>Drive Shaft Cover, Cover, Mounting Support, Piston Boot, Grommet, Engine Seal, etc.</p>
                               <a class="preview" href="images/product/full/item1.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                           </div>
                       </div>
                   </div>
               </div>  

               <div class="col-xs-12 col-sm-4 col-md-3">
                   <div class="recent-work-wrap">
                       <img class="img-responsive" src="images/product/recent/item2.jpg" alt="">
                       <div class="overlay">
                           <div class="recent-work-inner">
                               <h3><a href="#">Electrical Rubber Part</a></h3>
                               <p>Hose, Bellow, Cap Heater, Cap Tube, Plug, Rubber Leg, Isolater A/C, Grommet, Damper, etc.</p>
                               <a class="preview" href="images/product/full/item2.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                           </div>
                       </div>
                   </div>
               </div>

               <div class="col-xs-12 col-sm-4 col-md-3">
                   <div class="recent-work-wrap">
                       <img class="img-responsive" src="images/product/recent/item3.jpg" alt="">
                       <div class="overlay">
                           <div class="recent-work-inner">
                               <h3><a href="#">Rubber Part for Industrial Machine </a></h3>
                               <p>Gasket, Packing, Seal, O-Ring, Hose, Diaphragm,Picking Finger, etc.</p>
                               <a class="preview" href="images/product/full/item3.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                           </div>
                       </div>
                   </div>
               </div>  

               <div class="col-xs-12 col-sm-4 col-md-3">
                   <div class="recent-work-wrap">
                       <img class="img-responsive" src="images/product/recent/item4.jpg" alt="">
                       <div class="overlay">
                           <div class="recent-work-inner">
                               <h3><a href="#">General Rubber Part</a></h3>
                               <p>Rubber Ring, Rubber Mat, Condom Belt, Rubber for Toys, etc.</p>
                               <a class="preview" href="images/product/full/item4.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                           </div>
                       </div>
                   </div>
               </div>  
           </div><!--/.row-->
       </div><!--/.container-->
   </section><!--/#recent-works-->

โค้ด เลือก ขยาย


#recent-works .col-xs-12.col-sm-4.col-md-3{
 padding: 5;
}

#recent-works{
   padding-bottom: 20px;
}

.recent-work-wrap {
 position: relative;
}

.recent-work-wrap img{
 width: 100%;
}

.recent-work-wrap .recent-work-inner{
 top: 0;
 background: transparent;
 opacity: .8;
 width: 100%;
 border-radius: 0;
 margin-bottom: 0;
}

.recent-work-wrap .recent-work-inner h3{
 margin: 10px 0;
}

.recent-work-wrap .recent-work-inner h3 a{
 font-size: 24px;
 color: #fff;
}

.recent-work-wrap .overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 border-radius: 0;
 background: #3979bd;
 color: #fff;
 vertical-align: middle;
 -webkit-transition: opacity 500ms;
 -moz-transition: opacity 500ms;
 -o-transition: opacity 500ms;
 transition: opacity 500ms;  
 padding: 30px;
}

.recent-work-wrap .overlay .preview {
 bottom: 0;
 display: inline-block;
 height: 35px;
 line-height: 35px;
 border-radius: 0;
 background: transparent;
 text-align: center;
 color: #fff;
}

.recent-work-wrap:hover .overlay {
 opacity: 1;
}


[host24plus]

ไม่เจอปัญหา งง 

[kunnarakkup]

ไม่เจอปัญหา งง 

มันติดปัญหาบนมือถืออะครับ ตรงส่วนสินค้าที่เอานิ้วไปจิ้มแล้วมันไม่ขึ้น caption มันตกไปจิ้มตรงมุมๆซ้ายของภาพอะครับ พอข้อความขึ้นเว็บมันจะเด้งไปข้างบนก่อนรอบนึงด้วยอะครับ ไม่แน่ใจเป็นที่มือถือมั้ยผมเปิดใน iphone ยังไม่ได้ลองเปิดกับ android

[kumabro]

แก้พวก <a href="#" > เป็น <a href="javascript:void(0)"> ครับ จะไม่เด้งไปข้างบน 

[kunnarakkup]

แก้พวก <a href="#" > เป็น <a href="javascript:void(0)"> ครับ จะไม่เด้งไปข้างบน 

ขอบคุณครับจะลองแก้ดู

[insandedid]

ปัญหานี้ยาวครับ active - hover ไม่ทำงาน บนมือถือครับ ต้องใช้ลักษณะ เหมือน nav menu มันจะมีคำสั่งอยู่ครับ