हमारे पास बुनियादी गैलरी हेडर है, लेकिन यह छोटे नीले लोगों को याद कर रहा है जो एरिका ने मूल चित्रण में रखे थे। हमने इसके बारे में पहले ही बात कर ली थी, और फैसला किया कि यह बहुत अच्छा होगा यदि स्क्रीन का आकार बदल दिया जाता है, तो लोग डालते रहेंगे क्योंकि गैलरी की दीवार उनके पीछे चली गई थी, इसलिए ऐसा लग रहा है जैसे वे खौफ में गैलरी ब्राउज़ कर रहे हैं।
चूंकि लोग ग्राफिक्स विशुद्ध रूप से मौखिक हैं, उनके लिए मार्कअप का उपयोग करना आदर्श नहीं है। सौभाग्य से उनमें से दो हैं और हमें हर तत्व ( ::beforeऔर ::after) पर दो मुफ्त छद्म तत्व मिलते हैं । हम उन्हें जोड़ने के लिए उपयोग करते हैं।
हम इस वीडियो में एक अवधारणा पेश करते हैं जो "रिवर्सलो मीडिया क्वेश्चन" की अवधारणा के लिए उपयोगी साबित होती रहेगी। हम इस डिज़ाइन में बड़े पैमाने पर डेस्कटॉप-डाउन काम कर रहे हैं, इसलिए हमारे मीडिया के प्रश्न अधिकतर पर आधारित हैं max-width। लेकिन अगर हम उसी मीडिया क्वेरी को आधार min-widthबनाते हैं, तो हम स्क्रीन को केवल तब ही लक्षित कर सकते हैं जब यह एक निश्चित आकार से बड़ा हो, न कि छोटा।
इस परिस्थिति में, लोग ग्राफिक्स सिर्फ छोटे स्क्रीन पर फिट नहीं होते हैं। इसलिए हम उन्हें लोड करने के लिए रिवर्सलो मीडिया क्वेरी का उपयोग करते हैं, इस तरह हम उन्हें बड़ी स्क्रीन पर लोड करेंगे जो वे काम करते हैं, लेकिन उन्हें छोटे स्क्रीन पर लोड न करें। यह हर समय उन्हें लोड करने और उन्हें छोटे पर्दे पर छिपाने से बेहतर है।