html - In My Responsive Website Image is overlapping the text as i re size the site -

यहां मैंने उपयोग किया सीएसएस है

  .fluid {clear: both; मार्जिन-बाएं: 0; चौड़ाई: 100%; बाईंओर तैरना; प्रदर्शन क्षेत्र; } .fluidList {list-style: none; सूची-शैली-छवि: कोई नहीं; मार्जिन: 0; गद्दी: 0; } / * मोबाइल लेआउट: 480px और नीचे। * / .gridContainer {मार्जिन-बायां: ऑटो; मार्जिन-दाएं: ऑटो; चौड़ाई: 86.45%; पैडिंग-बाएं: 2.275%; पैडिंग-राइट: 2.275%; स्पष्ट: कोई नहीं; फ्लोट: कोई नहीं; } # Div1 {स्थिति: स्थिर; } # हेडर {चौड़ाई: 100%; स्थिति: स्थिर; } .logo_container {स्थिति: स्थिर; ऊंचाई: ऑटो; चौड़ाई: 100%; मार्जिन-बायें: 0; स्पष्ट: दोनों;} .logo_mvc {width: 200px; ऊँचाई: 67px; मार्जिन-बाएं: 0; पृष्ठभूमि छवि: यूआरएल (छवियाँ / mvcmbl.png); } .logo_gsm {चौड़ाई: 45.0526%; मार्जिन-बाएं: 5.2631%; स्पष्ट: कोई नहीं; ऊंचाई: 100px;} .imageslide {width: 100%; ऊंचाई: ऑटो; स्थिति: स्थिर; मार्जिन-बाएं: 0; दोनों को साफ करो; } .imageslide_gs {चौड़ाई: 23.7288%; ऊंचाई: 30px; मार्जिन-बाएं: 0; स्थिति: स्थिर; स्पष्ट: दोनों;} .imageslide_content {width: 49.1525%; ऊँचाई: 30px; मार्जिन-बाएं: 1.6 9 4 9%; स्पष्ट: कोई नहीं;} .imageslide_product {width: 22%; ऊँचाई: 30px; मार्जिन-बाएं: 1.6 9 4 9%; स्पष्ट: कोई नहीं; } .zeroMargin_mobile {मार्जिन-बायां: 0;} .hide_mobile {display: none;} / * टेबलेट लेआउट: 481px से 768px शैलियों से इनहेरिट्स: मोबाइल लेआउट * / @ मीडिया केवल स्क्रीन और (न्यूनतम-चौड़ाई: 481 पिक्स) {.gridContainer {width: 100%; पैडिंग-बाएं: 1.1625%; पैडिंग-राइट: 1.1625%; स्पष्ट: कोई नहीं; फ्लोट: कोई नहीं; मार्जिन-बाएं: ऑटो; } # Div1 {स्थिति: स्थिर; } # हेडर {चौड़ाई: 100%; स्थिति: स्थिर; } .logo_container {स्थिति: स्थिर; ऊंचाई: ऑटो; चौड़ाई: 100%; मार्जिन बायें: 2.5641%; स्पष्ट: कोई नहीं; } .logo_mvc {width: 300px; ऊँचाई: 100px; मार्जिन-बाएं: 0; पृष्ठभूमि छवि: यूआरएल (छवियाँ / mvctab.png); } .logo_gsm {width: 300px; मार्जिन बायें: 2.5641%; स्पष्ट: कोई नहीं; ऊँचाई: 30px; } .imageslide {width: 100%; ऊंचाई: ऑटो; स्थिति: स्थिर; मार्जिन-बाएं: 0; दोनों को साफ करो; } .imageslide_gs {चौड़ाई: 23.7288%; ऊंचाई: 30px; मार्जिन-बाएं: 0; स्थिति: स्थिर; स्पष्ट: दोनों;} .imageslide_content {width: 40%; ऊँचाई: 30px; मार्जिन-बाएं: 1.6 9 4 9%; स्पष्ट: कोई नहीं;} .imageslide_product {width: 22%; ऊँचाई: 30px; मार्जिन-बाएं: 1.6 9 4 9%; स्पष्ट: कोई नहीं; } .hide_tablet {display: none; } .zeroMargin_tablet {मार्जिन बाएँ: 0; }} / * डेस्कटॉप लेआउट: अधिकतम 732px तक 769px शैलियों से इनहेरिट्स: मोबाइल लेआउट और टैबलेट लेआउट * / @ मीडिया केवल स्क्रीन और (न्यूनतम-चौड़ाई: 769px) {.gridContainer {width: 74%; अधिकतम-चौड़ाई: 1232 पिक्सेल; पैडिंग-बाएं: 0.75%; पैडिंग-राइट: 0.75%; मार्जिन: ऑटो; स्पष्ट: कोई नहीं; फ्लोट: कोई नहीं; मार्जिन-बाएं: ऑटो; } # Div1 {स्थिति: स्थिर; } # हेडर {चौड़ाई: 100%; स्थिति: स्थिर; } .logo_container {मार्जिन-बाएं: 0; स्थिति: स्थिर; ऊंचाई: ऑटो; चौड़ाई: 100%; दोनों को साफ करो; } .logo_mvc {width: 360px; ऊँचाई: 120px; बाईंओर तैरना; मार्जिन-बाएं: 0; पृष्ठभूमि छवि: यूआरएल (छवियाँ / MVC-logo.png); } .logo_gsm {width: 200px; ऊँचाई: 133px; सही नाव; मार्जिन-बाएं: 1.6 9 4 9%; स्पष्ट: कोई नहीं; पृष्ठभूमि छवि: यूआरएल (छवियाँ / grandstreamlogo.png); } .imageslide {width: 100%; ऊंचाई: ऑटो; स्थिति: स्थिर; मार्जिन-बाएं: 1.6 9 4 9%; स्पष्ट: कोई नहीं; } .imageslide_gs {width: 200px; मार्जिन-बाएं: 1.6 9 4 9%; ऊँचाई: 200px; स्थिति: स्थिर; स्पष्ट: कोई नहीं; } .imageslide_content {width: 49.1525%; ऊँचाई: 30px; मार्जिन-बाएं: 1.6 9 4 9%; स्पष्ट: कोई नहीं; text-align: केंद्र; स्थिति: स्थिर; } .imageslide_product {width: 200px; ऊँचाई: 200px; स्थिति: स्थिर; मार्जिन-बाएं: 1.6 9 4 9%; स्पष्ट: कोई नहीं; पृष्ठभूमि छवि: यूआरएल (छवियाँ / producstucm.png); } .zeroMargin_desktop {मार्जिन-बायां: 0; } .hide_desktop {display: none; } छवि {अधिकतम-चौड़ाई: 100%; }}  

इस कोड में क्लास "imageslide_product (जो छवि है)" क्लास "imageslide_content" को ओवरलैप करता है, एक बार फिर से साइट को डेस्कटॉप से ​​टैबलेट दृश्य में बदलना (पाठ में छवि ओवरलैप टैबलेट और डेस्कटॉप आकार के बीच)।

कोई मदद कर सकता है