0
Wie deaktiviert man die Container-Klasse nur in der mobilen Ansicht?Leerzeichen unten rechts in der mobilen Ansicht in Chrom
A
Antwort
1
Es sieht so aus, als hätten Sie einige schließende Tags in Ihrem Code, die nichts wirklich schließen. Sogar in JSFiddle wurden diese Tags rot angezeigt.
Wenn ich sie wie in here entfernte, verschwand der weiße Zwischenraum zwischen der Fußzeile und dem Copyright. Nicht sicher, ob das das ist, was Sie wollten, aber es ist generell keine gute Idee, unnötige schließende Tags zu haben.
<meta charset="UTF-8">
<title>IDEO</title>
<link href="files/css/style.css" rel="stylesheet" type="text/css">
<link href="files/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="files/img/head.png" rel="shortcut icon">
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href="files/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<div id="header-container" class="menu-cursor navbar navbar-default navbar-fixed-top">
<p class="menu-logo">Logo</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
<ul class="small-menus">
<li><a href="#">Sample</a><a href="#">Sample</a><a href="#">Sample</a><a href="#">Sample</a><a href="#">Sample</a></li>
</ul>
</div>
</div>
<div class="container-fluid slider-section">
<div class="slider col-lg-8 col-md-8 col-sm-12">
<h1 class="slider-text-typewriting"> <a href="" class="typewrite" data-period="2000" data-type='[ "Sample Text 1", "Sample Text 2", "Sample Text 3", "Sample Text 4" ]'> <span class="wrap"></span> </a> </h1>
<h1 class="slider-text-typewriting"> <a href="" class="typewrite" data-period="2000" data-type='[ "Sample Text 1", "Sample Text 2", "Sample Text 3", "Sample Text 4" ]'> <span class="wrap"></span> </a> </h1>
<h1 class="slider-text-typewriting"> <a href="" class="typewrite" data-period="2000" data-type='[ "Sample Text 1", "Sample Text 2", "Sample Text 3", "Sample Text 4" ]'> <span class="wrap"></span> </a> </h1>
</div>
<div class="col-lg-3 col-md-3 slider-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p></p>
<p class="HomeHeader-ContactLink"><a href="#">Contact Us</a></p>
</div>
</div>
<ul class="Bands">
<div class="Band ThreeRichTilesBand WithinRowsOfBands">
<div class="container">
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">blog</span><span class="RichTile-TypeSecond">Blog Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
<!--</div>
<div class="container">-->
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 102 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 114 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left col-lg-4 col-md-4 col-sm-12">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog.png);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 127 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">blog</span><span class="RichTile-TypeSecond">Blog Name</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Sample heading text </a></span></h2>
</div>
</div>
</div>
</div>
</div>
<div class="Band FeaturedTileBand FeaturedTileBand--left">
<div class="FeaturedTileBand-ImageContainer">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/blog-main.jpg);"></div>
</div>
<div class="FeaturedTileBand-Content">
<div class="Grid">
<div class="FeaturedTileBand-PlaceholderContainer">
<div class="FeaturedTileBand-Placeholder"></div>
</div>
<div class="FeaturedTileBand-MainContainer">
<div class="FeaturedTileBand-Main">
<div class="FeaturedTileBand-MainContent">
<h3 class="FeaturedTileBand-TypesRow">
<span class="FeaturedTileBand-Type">questions</span><!-- react-text: 146 --><!-- /react-text -->
</h3>
<h2 class="FeaturedTileBand-Title"><span><a href="#">Lorem Ipsum is simply dummy text of the printing </a></span></h2>
<div class="FeaturedTileBand-Divider"></div>
<p class="FeaturedTileBand-Dek">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
<a class="Button" href="#">See our response</a>
</div>
<!-- react-text: 153 --><!-- /react-text -->
</div>
</div>
</div>
</div>
</div>
<div class="container home-four">
<h2>Sample Heading</h2>
<ul>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
<li><i class="fa fa-eject"></i>Sample text</li>
</ul>
</div>
<div class="container home-five">
<div>
<h2>Sample Heading</h2>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-4">
<div class="background"></div>
<h2>
<center>Heading Sample Text</center>
</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="Band PairTilesBand lightBlue WithinRowsOfBands">
<div class="Grid">
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-MainContainer">
<!-- react-text: 162 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Lorem Ipsum is simply dummy text of the printing</a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--medium RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 175 --><!-- /react-text -->
<h3>Case StudyNames</h3>
<h2 class="RichTile-Title"><span><a href="#">Lorem Ipsum is simply dummy text</a></span></h2>
<p class="more-link float-right"><a href="#">More <i class="fa fa-arrow-right"></i></a></p>
</div>
</div>
</div>
</div>
</div>
<div class="Band ThreeRichTilesBand WithinRowsOfBands">
<div class="Grid">
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 190 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study</span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Lorem Ipsum is simply dummy </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 203 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">Case Study </span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Lorem Ipsum is simply dummy text. </a></span></h2>
</div>
</div>
</div>
<div class="RichTile RichTile--small RichTile--left">
<div class="RichTile-Content">
<div class="RichTile-ImageContainer">
<a href="#">
<div class="SmartImage SmartImage--background" style="background-image:url(files/img/corporate.jpg);"></div>
</a>
</div>
<div class="RichTile-MainContainer">
<!-- react-text: 216 --><!-- /react-text -->
<h3 class="RichTile-TypesRow"><span class="RichTile-Type">blog</span><span class="RichTile-TypeSecond">Names</span></h3>
<h2 class="RichTile-Title"><span><a href="#">Lorem Ipsum is simply dummy text. </a></span></h2>
</div>
</div>
</div>
</div>
</div>
</ul>
<!--FOOTER-->
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-lg-4 footerleft ">
<div class="logofooter"> Logo</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p><i class="fa fa-map-pin"></i> </p>
<p><i class="fa fa-phone"></i> </p>
<p><i class="fa fa-envelope"></i> E-mail : </p>
</div>
<div class="col-md-2 col-sm-6 col-lg-4 paddingtop-bottom">
<h6 class="heading7">GENERAL LINKS</h6>
<ul class="footer-ul">
<li><a href="#"> Career</a></li>
<li><a href="#"> Privacy Policy</a></li>
<li><a href="#"> Terms & Conditions</a></li>
<li><a href="#"> Client Gateway</a></li>
<li><a href="#"> Ranking</a></li>
<li><a href="#"> Case Studies</a></li>
<li><a href="#"> Frequently Ask Questions</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6 col-lg-4 paddingtop-bottom">
<form action="" method="post">
<div class="input-prepend"><span class="add-on"><i class="icon-envelope"></i></span>
<input type="text" id="" name="" placeholder="[email protected]" class="form-control" style="width:200px;">
</div>
<br />
<input type="submit" class="btn btn-info" value="Subscribe Now!" />
</form>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
</div>
<!--footer start from here-->
<!--footer start from here-->
<!--Pulling Awesome Font -->
<div class="copyright">
<div class="container" style="text-align: center;">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="container" style="text-align: center;">
<div class="col-md-12">
<p>© 2016 -</p>
</div>
</div>
</div>
<script src="files/js/index.js"></script>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
Verwandte Themen
- 1. Problem in der mobilen Ansicht - CSS
- 2. Leerzeichen wird in der mobilen Ansicht in UWP in oberen Abschnitt in der Rasteransicht kommenden
- 3. Put JButton in unten rechts
- 4. navbar slide von der Seite statt unten in der mobilen Ansicht
- 5. chart.js Höhe in der mobilen Ansicht anpassen
- 6. Registerkarten in der mobilen Ansicht wischbar?
- 7. Menü isst Platz in der mobilen Ansicht
- 8. Footer Inhalt nicht in der mobilen Ansicht
- 9. Animations Android von oben rechts, unten links, unten rechts in Android drehen?
- 10. Responsive zentriert div verschiedene Ansicht in der mobilen Ansicht
- 11. Google Adsense Responsive-Anzeigenblöcke verursachen manchmal Leerzeichen in der mobilen Ansicht.
- 12. JQuery keyup/unten funktioniert nicht in Chrom
- 13. Wie kann man einen Container in der mobilen Ansicht nach unten drücken?
- 14. Wie Layout Ansicht rechts ausgerichtet und unten eines LinearLayout
- 15. LinearLayout mit Leerzeichen unten
- 16. Wasserzeichen Textposition unten rechts
- 17. Fix DIV unten rechts
- 18. Polsterung (links, oben, rechts, unten) in WPF
- 19. Ändern der Reihenfolge der divs in der mobilen Ansicht
- 20. Scroll Betrachter Resize (rechts unten) in wpf
- 21. Bildansicht unten rechts in FrameLayout ausrichten
- 22. Bootstrap-Menü funktioniert nicht ordnungsgemäß in der mobilen Ansicht
- 23. Bild unten rechts und unten links
- 24. QT - Schaltflächen unten rechts platzieren
- 25. Floating-Aktion Schaltfläche unten rechts
- 26. TextView auf unten rechts setzen
- 27. Unerwünschte Leerzeichen auf der rechten Seite und auf der Unterseite meines Website-Hintergrunds in der mobilen Ansicht
- 28. ganz besondere div in der mobilen Ansicht entfernen
- 29. Fest Hintergrund Abdeckung wird in der mobilen Ansicht gezoomt
- 30. Wordpress Bootstrap Untermenü immer in der mobilen Ansicht
Pls fügen Sie den Arbeits html –
Was ist Ihre Frage? Willst du diesen weißen Raum dort? Bitte geben Sie einen Code oder einen Link zu der Website an, auf der wir den Code untersuchen können. Bitte lesen Sie hier, wie Sie eine Frage stellen können: http://stackoverflow.com/help/how-to-ask –