Studio Editor: गैप्स और हॉरिजॉन्टल स्क्रॉल बार की समस्या को ठीक करना
5 मिनट
Studio Editor में साइट बनाते समय, आपको अनचाहे गैप्स और हॉरिजॉन्टल स्क्रॉल बार दिखाई दे सकते हैं। इस आर्टिकल में दिए गए स्टेप्स का इस्तेमाल करके जानें कि आपको क्या चेक करना चाहिए, ताकि किसी भी स्क्रीन साइज पर विजिटर्स को ये दिखाई न दें।
स्टेप 1 | लेयर्स पैनल में एलिमेंट्स को खोजें और फिर से पोजीशन करें
अगर कोई एलिमेंट अपने सेक्शन की सीमाओं से बाहर है, तो उस एलिमेंट को पूरी तरह से दिखाने के लिए ऑटोमैटिकली एक खाली गैप बन जाता है। अपने पेज एलिमेंट्स की लिस्ट देखने के लिए लेयर्स पैनल का इस्तेमाल करें, और उनमें से प्रत्येक को चेक करने और ज़रूरत के अनुसार रि-पोजीशन करने के लिए उन पर क्लिक करें।
लेयर्स पैनल में एलिमेंट्स को खोजने और फिर से पोजीशन करने के लिए:
- एडिटर के बाईं ओर लेयर्स
पर क्लिक करें। - पेज पर किसी एलिमेंट को खोजने के लिए उसे चुनें।
- इन टूल्स का उपयोग करके एलिमेंट को फिर से पोजीशन करें:
- इसे सही जगह पर ड्रैग और ड्रॉप करें।
- एलिमेंट का साइज कम करने के लिए हैंडल्स का उपयोग करें।
- इंस्पेक्टर पैनल
से मार्जिन एडजस्ट करें या एलिमेंट को रिसाइज करें।
स्टेप 2 | पेज के किनारों (edges) को चेक करें
भले ही कोई एलिमेंट किसी सेक्शन के अंदर स्थित हो, लेकिन उसके किनारे अभी भी पेज की सीमाओं को पार कर सकते हैं और एक व्हाइट गैप और/या हॉरिजॉन्टल स्क्रॉल बार बना सकते हैं। ऐसा अक्सर टेक्स्ट एलिमेंट्स के साथ होता है।
हर सेक्शन पर क्लिक करें और पेज के किनारों के पास मौजूद सभी एलिमेंट्स पर होवर करें। अगर उनमें से कोई भी ओवरफ्लो हो रहा है, तो आप उन्हें ज़रूरत के अनुसार मूव या रिसाइज कर सकते हैं।
स्टेप 3 | पेज की ओवरफ्लो कंटेंट (Overflow Content) सेटिंग बदलें
पेज पर व्हाइट गैप और हॉरिजॉन्टल स्क्रॉल बार को ऑटोमैटिकली दिखने से रोकने के लिए आप पेज के ओवरफ्लो कंटेंट को हाइड कर सकते हैं। यह सेटिंग पेज के किनारों को "क्लिप" कर देती है, जिससे कोई भी ओवरफ्लो होने वाले एलिमेंट्स (या एलिमेंट्स के हिस्से) क्रॉप हो जाते हैं।
ओवरफ्लो कंटेंट सेटिंग बदलने के लिए:
- पेज लेयर चुनें:
- संबंधित पेज पर जाएं।
- एडिटर के बाईं ओर लेयर्स पर क्लिक करें।
- पेज पर क्लिक करें।
- एडिटर के टॉप राइट में ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- डिज़ाइन टैब
पर क्लिक करें। - ओवरफ्लो कंटेंट (Overflow content) ड्रॉप-डाउन से हाइड (Hide) चुनें।
स्टेप 4 | सेक्शन की हाइट चेक करें
किसी सेक्शन या CSS ग्रिड के लिए आपके द्वारा सेट की गई हाइट और/या मिनिमम हाइट से गैप बन सकता है। अगर आप 'Fit to screen' बिहेवियर या vh मेजरमेंट (जो व्यूपोर्ट हाइट के सापेक्ष होता है) का इस्तेमाल कर रहे हैं, तो बड़ी स्क्रीन पर गैप और भी बड़ा दिख सकता है।
आप CSS ग्रिड और सेक्शन की साइजिंग चेक करने के लिए इंस्पेक्टर पैनल का इस्तेमाल कर सकते हैं, और ज़रूरत के अनुसार उनकी हाइट और/या मिनिमम हाइट बदल सकते हैं।
सेक्शन की हाइट चेक करने के लिए:
- संबंधित सेक्शन चुनें।
- एडिटर के टॉप राइट में ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- Size के अंदर Height और Min H सेटिंग्स को चेक और एडजस्ट करें।
ट्रबलशूटिंग
अगर आपको अभी भी अपने क्लाइंट की लाइव साइट पर अनचाहे गैप्स दिख रहे हैं, तो उन्हें हटाने के अन्य तरीकों के बारे में जानें या इस समस्या को ठीक करने के लिए यह वीडियो ट्यूटोरियल देखें।