มีลูกศิษย์ใช้ธีม 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 (max–width: 980px) {
.twoX2 .et_pb_column{
max–width: 50% !important;
}
.twoX2 .et_pb_column.et_pb_column_1_3:nth–of–type(3){
margin: 0 25%;
}
}
@media (max–width: 479px){
.et_pb_section .et_pb_row.twoX2 div.et_pb_column.et_pb_column_1_4 {
width: 47.25% !important;
}
}
เมื่อเปิดด้วยมือถือจะมี 2 คอลัมน์ ครับ