Chúng tôi bắt đầu với việc chơi với mô-đun bài đăng trên blog của chúng tôi, tìm hiểu xung quanh với khoảng cách. Chúng tôi cũng thêm hình vuông nhỏ màu ở phía trên bên trái của mô-đun, một dấu hiệu trực quan về loại nội dung của nó.
Thay đổi tiếp theo mà chúng tôi thực hiện là giảm bớt một số khoảng trống bên ngoài ở kích thước màn hình hẹp hơn. Trên màn hình rộng, nội dung có chiều rộng 80% (cạnh chiều rộng 10%) nhưng sẽ tốt hơn khi hiển thị giống 90% trên màn hình nhỏ hơn (cạnh chiều rộng 5%).
Chúng tôi thêm một chút chuyển đổi khi truy vấn phương tiện đó truy cập, đây có thể là một thủ thuật thiết kế thực sự thú vị. Tôi thích nó trong video này, nhưng cuối cùng điều này đã bị rút khỏi thiết kế. Nó có thể bị giật khi có nhiều nội dung hơn trên trang và gây mất tập trung.
Chúng tôi thay đổi hệ thống lưới của mình để có một điểm ngắt ở kích thước nhỏ nhất. Thật là dễ dàng, chúng tôi chỉ cần ngừng thả nổi các cột và làm cho chúng width: 100%;Yay để không làm lưới quá mức! Chúng tôi đang chiến đấu với một số vấn đề về tính đặc thù.
Chúng tôi mở trình mô phỏng iOS thực để kiểm tra lưới hoạt động trên thiết bị di động "thực". Chúng tôi gặp khó khăn một chút trong việc tìm kiếm thẻ meta thích hợp, nhưng cuối cùng đã tìm được thẻ đúng từ CSS-Tricks.com. Nó hoạt động! Nhưng tất nhiên, chúng tôi có một số vấn đề về định vị mà chúng tôi cần giải quyết. Đối với bản ghi, thẻ meta đó là:
Chúng tôi mày mò mày mò với khoảng cách và định cỡ cho đến khi mọi thứ trông ổn. Mọi thứ đang được đáp ứng khá tốt vào cuối cùng!