2017-02-08 8 views
17

जब मैं स्मार्टफोन (आईफोन) या मैकबुक पर सफारी ब्राउज़र के साथ अपनी वेबसाइट की जांच करता हूं, तो मेरी वेबसाइट के कुछ तत्व ब्राउज़र विंडो की तुलना में व्यापक हैं। body -टैग। मैंने देव-उपकरण के साथ वेबसाइट की जांच की है और ऐसा लगता है कि यह 600px की चौड़ाई और नीचे की ओर शुरू होता है। मुझे क्रोम में यह समस्या नहीं दिखाई दे रही है।खिड़की से अधिक तत्व - सीएसएस

आप यहां एक स्क्रीनशॉट देख सकते हैं और देख सकते हैं कि खिड़की की चौड़ाई 375 पीएक्स है लेकिन body -टैग 43 9 पीएक्स चौड़ा है।

Screenshot

मैं इस सीएसएस-नियमों को लागू करने कर रहा हूँ क्योंकि मैंने पढ़ा है इस समस्या को हल करना चाहिए, लेकिन यह, दुर्भाग्य से मेरे लिए नहीं है। http://www.firma-info.no

मुझे आशा है कि किसी ने मुझसे के लिए एक सलाह है:

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

यहाँ वेबसाइट के बारे में मैं बात कर रहा हूँ है।

अग्रिम धन्यवाद!

+0

शायद का उपयोग 'प्रदर्शन: एक साथ flex' 'फ्लेक्स-रैप' संपत्ति के साथ: http://cssreference.io/property/flex-wrap/ – elementzero23

+2

आपको अपने प्रश्न में यहां समस्या को दोहराने के लिए ** न्यूनतम कार्य उदाहरण ** पोस्ट करने की आवश्यकता है। बाहरी साइटों के लिंक जोड़ना बेकार है, क्योंकि समस्या हल होने के बाद सवाल संदिग्ध हो जाता है। कृपया अपना मार्कअप और सीएसएस (व्यवहार को दोहराने के लिए आवश्यक न्यूनतम राशि) यहां पोस्ट करें। – BenM

+0

@ बेनएम मैं एक उदाहरण जोड़ना चाहता हूं जो इस मुद्दे को दिखाता है लेकिन यदि मैं या तो jsfiddle या codepen में अपना मार्कअप जोड़ता हूं तो समस्या नहीं होती है। लेकिन यह अभी भी मेरी वेबसाइट पर है। क्या आपको सलाह है कि मैं इस मुद्दे को कैसे दोहरा सकता हूं? –

उत्तर

17

मैं उत्तरदायी देखें

में डेस्कटॉप पर Firefox पर परीक्षण कर रहा हूँ लेकिन, मुझे पता चला है कि पृष्ठभूमि में बादलों। x1, .x2 etc. खिड़की की अपेक्षा से चौड़ाई में बड़ा होने का कारण बन रहा है। यह वह मामला है जब बादल उनके एनीमेशन के अंत की ओर हैं।

#page पर नौकरी करता है।

मुझे नहीं पता कि यह निश्चित रूप से आपकी समस्या का कारण बन रहा है, लेकिन यह वैसे भी मदद कर सकता है।


इसके अलावा, मैं रूपांतरण अपने एनीमेशन के अंदर मार्जिन बादलों के बजाय स्थानांतरित करने के लिए अनुवाद का उपयोग की सलाह देते हैं।

+0

बहुत बहुत धन्यवाद! इससे समस्या हल हो गई। –

1

आप आसानी से बूटस्ट्रैप को लागू करके या पिक्सेल आकार की बजाय चौड़ाई को सेट करके इसे ठीक कर सकते हैं।

बूटस्ट्रैप स्तंभ आकार कि स्क्रीन आकार के साथ समायोजित कर देता है और काफी आसान है

को लागू करने के लिए विशेष div वर्ग हैं अर्थात

<div class="col-xs-2 col-sm-2"></div> 
      <div class="col-sm-8 col-xs-12" align="center" id="content"> 

आप अपने दस्तावेज़ के शीर्ष टैग में इस लागू करने की आवश्यकता

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
+1

यह समस्या को ठीक कर सकता है, लेकिन मुझे विश्वास नहीं है कि 2 जावास्क्रिप्ट फ़ाइलों और एक बड़े ढांचे सहित + अवैध HTML __align = "center" __ इस समस्या के लिए उपयुक्त है। –

+0

खेद है कि आप बाएं और दाएं कोने में 2 कोल्स जोड़ सकते हैं जब पृष्ठ बड़ा होता है और उन्हें खाली भी छोड़ देता है। –

1

देना एक अतिप्रवाह-x: सीएसएस में शरीर टैग पर छिपा

संबंधित मुद्दे