Αρχίζουμε να παίζουμε με την ενότητα ανάρτησης του ιστολογίου μας, παίζοντας με διαστήματα. Προσθέτουμε επίσης το μικρό χρωματισμένο τετράγωνο στην επάνω αριστερή γωνία της μονάδας, ένα οπτικό σήμα για τον τύπο του περιεχομένου που είναι.
Η επόμενη αλλαγή που κάνουμε είναι να μειώσουμε μερικά από τα κενά εξωτερικού χώρου σε στενότερα μεγέθη οθόνης. Σε ευρείες οθόνες, το περιεχόμενο έχει πλάτος 80% (άκρα πλάτους 10%), αλλά είναι καλύτερα να πάει περισσότερο σαν 90% σε μικρότερες οθόνες (άκρα πλάτους 5%).
Προσθέτουμε σε μια μικρή μετάβαση για το πότε χτυπά αυτό το ερώτημα πολυμέσων, το οποίο μπορεί να είναι ένα πολύ διασκεδαστικό τέχνασμα σχεδιαστών. Μου αρέσει σε αυτό το βίντεο, αλλά τελικά τραβήχτηκε από το σχέδιο. Μπορεί να πάρει ασταθές όταν υπάρχει πολύ περισσότερο περιεχόμενο στη σελίδα και μάλλον αποσπά την προσοχή.
Αλλάζουμε το σύστημα πλέγματος για να έχουμε ένα σημείο διακοπής στο μικρότερο μέγεθος. Είναι εξαιρετικά εύκολο, σταματάμε να αιωρούμε τις στήλες και τις κάνουμε width: 100%;Yay για να μην υπερβάλλουμε τα πλέγματα! Αντιμετωπίζουμε ορισμένα προβλήματα εξειδίκευσης στο δρόμο.
Ανοίγουμε τον πραγματικό προσομοιωτή iOS για να ελέγξουμε το πλέγμα που λειτουργεί σε μια «πραγματική» φορητή συσκευή. Παλεύουμε λίγο να βρούμε την κατάλληλη μετα-ετικέτα, αλλά τελικά πηγαίνουμε στη σωστή από το CSS-Tricks.com. Δουλεύει! Αλλά φυσικά έχουμε κάποια ζητήματα τοποθέτησης που πρέπει να επιλύσουμε. Για την εγγραφή, αυτή η μετα-ετικέτα είναι:
Tinker tinker tinker με απόσταση και μέγεθος έως ότου τα πράγματα φαίνονται εντάξει. Τα πράγματα φαίνονται αρκετά καλά ανταποκρινόμενα μέχρι το τέλος!