ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingช่วยดูcode ตอนปรับบนมือถือที่ครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ช่วยดูcode ตอนปรับบนมือถือที่ครับ  (อ่าน 808 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
kunnarakkup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 886



ดูรายละเอียด
« เมื่อ: 27 กรกฎาคม 2017, 00:56:07 »

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


ผมอยากขยับตรงที่วงไว้ให้มันอยู่ตรงกลาง ตอนบนมือถืออะครับ จากcode ควรปรับยังไงต่อดีครับ



โค๊ด:
    <section id="feature" >
        <div class="container">
           <div class="center wow fadeInDown">
                <h2>Features</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>

            <div class="row">
                <div class="features">
                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="feature-wrap">
                            <i class="fa fa-bullhorn"></i>
                        </div>                           
                        <h2>Fresh and Clean</h2>
                        <h3>สร้างความเชื่อมั่นและความไว้วางใจให้กับลูกค้าโดยการผลิต ผลิตภัณฑ์ที่มี คุณค่า ตรงตามความต้องการของลูกค้า  ซึ่ง

            ประกอบด้วย สินค้าที่มีคุณภาพในราคาที่เหมาะสม จัดส่งสินค้าตรงตามกำหนดและการบริการที่จริงใจเพื่อสร้างความพึง

            พอใจให้กับลูกค้า</h3>

                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="feature-wrap">
                            <i class="fa fa-comments"></i>
                        </div>
                                                   
                            <h2>Fresh and Clean</h2>
                            <h3>การบริหารจัดการองค์กร โดยมุ่งเน้นในการพัฒนาทรัพยากรมนุษย์เพื่อเพิ่มขีดความสามารถของพนักงานให้สามารถสร้าง

             องค์กรนวัตกรรม ภายใต้การดูแลขวัญกำลังใจของพนักงาน</h3>

                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="feature-wrap">
                            <i class="fa fa-cloud-download"></i>
                        </div>
                            <h2>Fresh and Clean</h2>
                            <h3>สร้างพันธมิตรทางธุรกิจใน ห่วงโซ่ทางธุรกิจตั้งแต่ต้นน้ำ(ผู้ขาย) จนถึง ปลายน้ำ(ลูกค้า) โดยการแลกเปลี่ยนความรู้ 

             ความสามารถและประสบการณ์ที่เป็นประโยชน์เพื่อหาแนวทางในการแก้ไขปัญหาและพัฒนาองค์กรร่วมกัน รวมถึงการผูก

             มิตรกับชุมชนรอบ</h3>
                    </div><!--/.col-md-4-->
               
                   
                </div><!--/.services-->
            </div><!--/.row-->   
        </div><!--/.container-->
    </section><!--/#feature-->



โค๊ด:
.center {
  text-align: center;
  padding-bottom: 55px;
}


#feature {
  background: #f2f2f2;
  padding-bottom: 40px;
}

.features{
  padding: 0;
}

.feature-wrap {
  margin-bottom: 35px;
  overflow: hidden;
}

.feature-wrap h2{
  margin-top: 10px;
}

.feature-wrap .pull-left {
  margin-right: 25px;
}

.feature-wrap i{
  font-size: 48px;
  height: 110px;
  width: 110px;
  margin: 3px;
  border-radius: 100%;
  line-height: 110px;
  text-align:center;
  background: #ffffff;
  color: #c52d2f;
  border: 3px solid #ffffff;
  box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  float: left;
  margin-right: 25px;
}

.feature-wrap i:hover {
  background: #c52d2f;
  color: #fff;
  box-shadow: inset 0 0 0 5px #c52d2f;
  -webkit-box-shadow: inset 0 0 0 5px #c52d2f;
  border: 3px solid #c52d2f;
}
บันทึกการเข้า
9arduino
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 23
ออฟไลน์ ออฟไลน์

กระทู้: 1,025



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 27 กรกฎาคม 2017, 07:59:55 »

สนใจ Host ฟรีไหมครับ

https://www.9arduino.com/b/10
บันทึกการเข้า

BOS
ก๊วนเสียว
*

พลังน้ำใจ: 33
ออฟไลน์ ออฟไลน์

กระทู้: 459



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 27 กรกฎาคม 2017, 08:22:59 »

เพิ่ม text-align:center ใน .feature-wrap
ลบ float:left ใน .feature-wrap i แล้วเพิ่ม display:inline-block เข้าไป

ดังนี้
โค๊ด:
.center {
  text-align: center;
  padding-bottom: 55px;
}


#feature {
  background: #f2f2f2;
  padding-bottom: 40px;
}

.features{
  padding: 0;
}

.feature-wrap {
  margin-bottom: 35px;
  overflow: hidden;
  text-align:center;
}

.feature-wrap h2{
  margin-top: 10px;
}

.feature-wrap .pull-left {
  margin-right: 25px;
}

.feature-wrap i{
  display:inline-block;
  font-size: 48px;
  height: 110px;
  width: 110px;
  margin: 3px;
  border-radius: 100%;
  line-height: 110px;
  text-align:center;
  background: #ffffff;
  color: #c52d2f;
  border: 3px solid #ffffff;
  box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  margin-right: 25px;
}

.feature-wrap i:hover {
  background: #c52d2f;
  color: #fff;
  box-shadow: inset 0 0 0 5px #c52d2f;
  -webkit-box-shadow: inset 0 0 0 5px #c52d2f;
  border: 3px solid #c52d2f;
}
บันทึกการเข้า

MD.18
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 287
ออฟไลน์ ออฟไลน์

กระทู้: 3,010



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 27 กรกฎาคม 2017, 09:49:51 »

แนะนำให้ทำ center ตั้งแต่ .feature เลยครับจะดูจัดกลางสวยกว่า

.features{padding: 0 10%;text-align:center}
.feature-wrap{margin:15% auto 0}
.feature-wrap i{float:none}

แล้วก็ทำไอคอนให้เล็กลงมาซะครับ
.feature-wrap i{font-size: 28px;height: 60px;width: 60px;line-height: 200%;float: none;margin-right: 0;}

h3 ก็ปรับ line-height ให้เหลือเ็นซํก h3{font-size:0.98em;line-height: 1.3em;}

ประมาณนี้ก็จะได้การแสดงผลที่ดููดีครับ และไม่เปลืองเนื้อที่แนวตั้งมากไป
บันทึกการเข้า

ติดต่อทางเมล์ service.md18@gmail.com by ทวีศักดิ์  line : 0862600055

คิวงานว่าง !!
kunnarakkup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 886



ดูรายละเอียด
« ตอบ #4 เมื่อ: 27 กรกฎาคม 2017, 11:35:47 »

แนะนำให้ทำ center ตั้งแต่ .feature เลยครับจะดูจัดกลางสวยกว่า

.features{padding: 0 10%;text-align:center}
.feature-wrap{margin:15% auto 0}
.feature-wrap i{float:none}

แล้วก็ทำไอคอนให้เล็กลงมาซะครับ
.feature-wrap i{font-size: 28px;height: 60px;width: 60px;line-height: 200%;float: none;margin-right: 0;}

h3 ก็ปรับ line-height ให้เหลือเ็นซํก h3{font-size:0.98em;line-height: 1.3em;}

ประมาณนี้ก็จะได้การแสดงผลที่ดููดีครับ และไม่เปลืองเนื้อที่แนวตั้งมากไป

ถามอีกอย่างครับตรง icon ผมอยากใส่เป็นตัวอักษร A B C D อะครับ แต่มันไม่มีชื่อ icon ต้องทำยังไงอะครับ สามารถสร้างขึ้นมาเองได้มั้ยครับ แล้วถ้าสร้างขึ้นมาเองนี้ จะเรียกใช้ยังไง
บันทึกการเข้า
MD.18
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 287
ออฟไลน์ ออฟไลน์

กระทู้: 3,010



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 27 กรกฎาคม 2017, 12:48:38 »

แนะนำให้ทำ center ตั้งแต่ .feature เลยครับจะดูจัดกลางสวยกว่า

.features{padding: 0 10%;text-align:center}
.feature-wrap{margin:15% auto 0}
.feature-wrap i{float:none}

แล้วก็ทำไอคอนให้เล็กลงมาซะครับ
.feature-wrap i{font-size: 28px;height: 60px;width: 60px;line-height: 200%;float: none;margin-right: 0;}

h3 ก็ปรับ line-height ให้เหลือเ็นซํก h3{font-size:0.98em;line-height: 1.3em;}

ประมาณนี้ก็จะได้การแสดงผลที่ดููดีครับ และไม่เปลืองเนื้อที่แนวตั้งมากไป

ถามอีกอย่างครับตรง icon ผมอยากใส่เป็นตัวอักษร A B C D อะครับ แต่มันไม่มีชื่อ icon ต้องทำยังไงอะครับ สามารถสร้างขึ้นมาเองได้มั้ยครับ แล้วถ้าสร้างขึ้นมาเองนี้ จะเรียกใช้ยังไง

ให้ดูตรง <i class="fa fa-bullhorn"></i>  มันจะไม่มีอักษรก็ใส่ A ไปครับเป็นแบบนี้  <i class="fa fa-bullhorn">A</i>
แล้วก็ไปดูตรง css   .fa-bullhorn:before{content: "\f0a1";} ก็ลบเป็น  .fa-bullhorn:before{}

ก็จะได้อักษร A ในวงกลม  อยากปรับสไตล์อักษรก็แก้ที่คลาส .feature-wrap i

เป็นอันเสร็จ

ถ้าถามเพิ่มอีกผมเก็บตังค์ละนะ  wanwan004
บันทึกการเข้า

ติดต่อทางเมล์ service.md18@gmail.com by ทวีศักดิ์  line : 0862600055

คิวงานว่าง !!
Okay168
ก๊วนเสียว
*

พลังน้ำใจ: 89
ออฟไลน์ ออฟไลน์

กระทู้: 304



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 27 กรกฎาคม 2017, 12:55:01 »

เยี่ยมมากครับ  wanwan017
บันทึกการเข้า

หน้า: [1]   ขึ้นบน
พิมพ์