Αν και ο τίτλος είναι παραπλανητικός , το αποτέλσμα είναι αυτό που θέλουμε.
Εστω οτι θέλουμε να έχουμε μεσα σε ένα article 3 στήλες οι οποίες να ακολουθούν το πλάτος της σελίδας μας και μόλις φτάσουν σε επίπεδο κινητού πχ μικρότερο από 480 px πλάτος να φαίνεται η μια στήλη κάτω από την άλλη .
έστω οτι η κάθε στήλη θα έχει πλάτος 33% της σελίδα
πηγαίνουμε στο css μας και προσθέτουμε
.span_1_of_3 {
width: 33.3%;
}
ο λόγος που το ονομάζουμε έτσι είναι ο εξής . Μπορώ αν θέλω να εχω σε κάθε στηλη άλλο πλάτος δίνοντας την άλλη κλαση . πχ .span_2_of_3 { width: 66.3%; } . Στο παράδειγμα μας δεν χρειάζεται.
αφού κάνουμε τις προσθήκες στο css πάμε στην σελίδα μας και προσθέτουμε στα κείμενα μας
<div class=”col span_1_of_3″>
<p><strong>τιτλος 1</strong></p>
<p>κείμενο 1</p>
</div>
<div class=”col span_1_of_3″>
<p><strong>τιτλος 2</strong></p>
<p>κείμενο 2</p>
</div>
<div class=”col span_1_of_3″>
<p><strong>τιτλος 3</strong></p>
<p>κείμενο 3</p>
</div>
αν όλα πήγαν καλά θα δούμε 3 column που ανάλογα με το μέγεθος της οθόνης αυξομειώνουν το πλάτος τους,
Για να ολοκληρώοσυμε και το responsive design θα πάμε στο css και θα πούμε. Αν η οθόνη είναι μικρότερη απο 480 px τοτε τα span_1_of_3 δείξτα το ένα κάτω από το άλλο
πάω λοιπόν πάλι στο css Μου και προσθέτω
@media only screen and (max-width: 480px) {
.span_1_of_3 {
width: 100%;
}
{fcomment}