สมมติให้ emoji 4 ตัวนี้ เป็นภาพนะครับ



ตอนจัดวางแบบเปิดในคอมจะเรียง 4 ภาพ แบบด้านบน

แต่พอมัน responsive ไปที่มือถือมันจะเรียงลงด้านล่างแบบนี้





ผมอยากให้มันแสดงผลเป็นแบบนี้ในมือถือ



ช่วยแนะนำวิธีหน่อยครับ

- ผมลองปรับค่า Responsive Breakpoint แล้ว ไม่ได้ผลเลย

- ลองปรับค่า max-width มันก็กลายเป็นภาพเล็กลง
แต่มันก็เรียงลงด้านล่าง ไม่ยอมอยู่แถวเดียวกันเหมือนเดิม

- ตอนนี้ที่ทำแล้วได้ผลคือใช้ element image carousel ละใส่ภาพที่ละ 2 ภาพ ไปใน element
ทำให้โค้ดมั้งมองเป็น object เดียวกัน (มั้ง) ถึงจะแสดง 2 ภาพ คู่กันในมือถือให้
(แต่เนื่องจากผมต้องการทำ modal ซึ่งไม่รู้จะสั่งให้มันแสดงจาก element image carousel ยังไง
เลยจำเป็นลองหาวิธีทำให้ภาพ 4 ภาพ ดังกล่าว มันแสดงผลแบบอยู่กันเป็นคู่ในแถวเดียวกันครับ)

ปล.ใช้ตีม Avada ครับ

ปรับแสดงผลเป็นมือถือแล้วลองแก้ได้มั้ยครับ

ไม่ก็ผมคิดแบบโง่ๆเลย ก็คือแบบแรกอ่ะท่านกดให้แสดงผลแค่บนคอม แล้วซ่อนบนมือถือ

แล้วก็ทำอีกอันนึง ให้ซ่อนบนคอมแล้วแสดงแค่บนมือถือ

ถ้าไม่สนว่าโค้ดดูน่าเกลียด

จับใส่table น่าจะเรียงกันแนวนอนได้แน่ๆ

ลองปรับแล้ว มันกลายเป็นภาพใหญ่ ๆ เกือบเต็มจอ แล้วเรียงลงมาครับ
หรือพอปรับความกว้างให้เล็กลง ก็กลายเป็นภาพเล็กๆ เรียงลงมา ทั้ง ๆ ที่เหลือที่ว่างด้านขวาตรึม

ส่วนการปรับให้แสดงผลคนละที่
ในส่วนของแบบที่เป็น element image carousel ที่ใช้แล้วแสดงบนมือถือภาพคู่ในแถวเดียวกันได้
มันดันใส่ element modal ไม่ได้อ่าครับ
(ผมต้องการจะให้คลิกภาพแล้วเด้งหน้าต่างpopup ขึ้นมา โดยไม่รีเฟรสหน้า ซึ่ง element image carousel มันยอมให้ผมใส่ลิงก์ในรูปภาพได้นะ แต่ว่า element modal มันดันไม่มีลิงก์ที่จะเอามาใส่ )

ทำยังไงครับ ใส่ตารางเหรอ

ผมลองเอา 2 อย่างที่พวกท่านว่ามายำกัน
ปรับแสดงผลแยก แล้วเอาส่วนของที่จะแสดงผลในมือถือไปใส่ตาราง ผลออกมาไม่เลวเลยครับ

ขอบคุณมากครับ
แต่ถ้าใครมีวิธี ที่ทำให้มัน responsive ได้โดยไม่ต้องทำแยกออกมาก็จะดีมากเลยครับ

สร้าง row โดยแบ่งเป็น 2 column แต่ละ column ใส่ 2 ภาพ ปรับ column ให้แสดงเป็น inline, padding left-right 5% ลองดูครับไม่ได้ทำนานละ

พอจะมีโค้ด และวิธีใส่ไหมครับ
ผมเขียน css ไม่เป็น

ลองใช้ bootstrap น่าจะง่ายกว่าครับ
https://getbootstrap.com/docs/4.0/layout/grid/

ใช้ยังไงครับอันนี้

ใช้ class ชื่อ ว่า col-6 col-lg-3 ใน tag ครับ

มันจะแบ่งช่องเปน 4 ช่องใน หน้าจอ >= 992px
แล้วจะแบ่งครึ่งๆ ในจอ <= 991px

ครับ

ใช้ bootstrap แบบเม้นบนครับ

มันดักมีเดียให้เลย ถ้าอยากกำหนดไซส์เอง ไปคอนฟิก css เพิ่ม

มันใช้ยังไงครับ ก็อปไปแปะได้เลยไหมครับ

https://theme-fusion.com/documentation/avada/elements/column-element/#howto

ถ้า theme ใหญ่ๆน่าจะมีพวก column อยู่นะครับ

อันนี้ผมลองแบ่งแล้วครับ แต่พอไปเปปิดในมือถือ มันแสดงผลแบบนี้