วันเสาร์ที่ 21 มีนาคม พ.ศ. 2558

Left sidebar under main content on Mobile

การกำหนดให้เนื้อหาแสดงผลก่อนไซด์บาร์บนอุปกรณ์โมบาย


การทำร้านค้าออนไลน์ ให้แสดงผลบน Mobile Devices ในส่วนที่เป็นหน้ารวมสินค้า ถ้าดีไซน์มาเป็น right sidebar อยู่แล้วคงไม่มีปัญหาเวลาดูบนอุปกรณ์โมบาย เพราะ sidebar จะปัดไปอยู่ล่าง main content อยู่แล้ว แต่ในกรณีที่ดีไซน์มาเป็น left sidebar เวลาลูกค้ากด add to cart เราคงไม่อยากให้ sidebar ขึ้นมาอยู่ก่อน main content ในขั้นตอนการไปสู่หน้า cart และหน้า checkout


วิธีแก้ปัญหา


ผมแก้ปัญหาโดยใช้วิธีง่ายๆ โดยให้ sidebar อยู่ล่าง main content และกำหนดให้ #sidebar float:left และ #main float:right บนหน้าจอตั้งแต่ 981px ขึ้นไปตามโค้ดด้านล่างครับ




Left sidebar under main content on Mobile

ไม่มีความคิดเห็น:

แสดงความคิดเห็น