ทำ responsive แบบ 2 คอลัมน์ บนธีม DIVI ของ wordpress บนมือถือ

มีลูกศิษย์ใช้ธีม DIVI ของ elegantthemes.com มีปัญหาเรื่องการแสดงผล บนมือถือแบบหลายคอลัมน์ ซึ่งเมื่อเราทำไว้บนคอมพิวเตอร์แบบหลายคอลัมน์ แต่เมื่อมาแสดงผลบนมือถือจะแสดงเรียงลงมาทีละคอลัมน์สไตล์ responsive

แต่ถ้าหากต้องการให้แสดงทีละ 2 คอลัมน์บนมือถือ ต้องเข้าไปเขียน CSS เพิ่ม โดยทำดังนี้

เริ่มจากเปิด หน้าที่จะทำ

จากนั้นคลิกไปตั้งชื่อ CSS เป็น twoX2

แล้วไปที่ divi theme option

เลื่อนไปที่บรรทัดสุดท้าย custom css

CSS code นำมาจาก เว็บนี้ครับ fibonaccidesignlab.com/divi-media-queries-and-2×2-mobile/  ตามนี้ครับ

/* Smartphones (landscape) ———– */
@media (maxwidth: 980px) {
.twoX2 .et_pb_column{
maxwidth: 50% !important;
}
.twoX2 .et_pb_column.et_pb_column_1_3:nthoftype(3){
margin: 0 25%;
}
}
@media (maxwidth: 479px){
.et_pb_section .et_pb_row.twoX2 div.et_pb_column.et_pb_column_1_{
    width: 47.25% !important;
}
}
เมื่อเปิดด้วยมือถือจะมี 2 คอลัมน์ ครับ
Share