Extra space in Div with image, resizing issues
hi, have image within div, , reason theres alot of space underneath when resize mobile view.
i've tried looking around , i've tried alot of different solutions cant find problem... has bootstrap components dont think thats problem.
heres html
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/design.css" rel="stylesheet" type="text/css">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test2</title>
<!-- html5 shim , respond.js ie8 support of html5 elements , media queries -->
<!-- warning: respond.js doesn't work if view page via file:// -->
<!--[if lt ie 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="padding-top:50px; margin:;">
<!-- navigation menu -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topfixednavbar1" aria-expanded="false"><span class="sr-only">toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">amyl puno</a></div>
<div class="collapse navbar-collapse" id="topfixednavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#bio">bio</a></li>
<li><a href="#resume">resume</a></li>
<li><a href="#">why me?</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- section intro
--> <div id="sectionintro">
<!-- containter fluid
--><div class="container-fluid"> <!-- logo
--><div id="imagelogo"><img src="images/logo.png" width="500px" height="" alt=""/> </div>
<!-- banner
--> <div id="imagebanner">
<img id="banner" src="images/lakeside.jpeg" />
</div>
<!-- bio
--> <div id="bio">
<div class="container">
<div class="col-md-2">
<h1>header 1</h1>
</div>
<div class="col-md-8">
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. natus atque error sint officiis totam porro est laborum accusamus ducimus earum quod, quas blanditiis provident distinctio ipsum odit. aliquid fugiat, ullam vel laboriosam quaerat ipsam animi, sint possimus optio laborum repellendus recusandae est incidunt deserunt corporis aut autem quis enim minima! velit laboriosam ratione et reprehenderit ipsum autem dolores sapiente suscipit perspiciatis! sapiente accusantium, labore nulla, vel, itaque obcaecati ullam doloremque non unde voluptate quia, distinctio dicta culpa quod! molestiae iure placeat amet eius, deserunt numquam veniam incidunt unde dolorem ea explicabo maiores minus quos fugit fugiat dolor eveniet, nam porro! magnam molestiae facilis animi ad, quibusdam, excepturi laborum rem sapiente ab labore ipsam ducimus. illo laborum voluptate sunt, aliquam quisquam esse nihil sapiente asperiores quis consectetur maiores reprehenderit neque sed consequatur. molestias quaerat veniam voluptate debitis adipisci blanditiis et ipsum necessitatibus tempora suscipit commodi excepturi sunt quidem voluptas asperiores reiciendis mollitia laboriosam doloremque quod nulla repellendus, dolorem similique ipsam dicta nostrum. quam ipsam exercitationem ea voluptate molestiae, unde repellendus nostrum, consequatur eius eos minus qui harum, hic quibusdam distinctio sit tempore fugiat nihil quidem. consequuntur fugiat, officia assumenda in veniam, facere corporis aut distinctio saepe autem voluptas. iusto, veritatis.</p>
</div>
<div class="col-md-2">
<a href=""><p>lorem ipsum dolor sit amet.</p></a>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<!-- end bio
--></div>
<p></p>
<!-- end section intro -->
<!-- section resume -->
<div id="resume">
<div class="container">
<div class="col-md-3">
<h1>education</h1></div>
<div class="col-md-9">
<!-- education uni -->
<div class="item">
<div class="col-md-7">
<h3><span>school</span></h3>
<p>
<span>lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></p>
</div>
<div class="col-md-2">
<p> "2016-2019"
<br>
<span style="color: gray;">birmingham</span>
</p>
</div>
</div>
<br>
<!-- education sixth form -->
<div class="item">
<div class="col-md-7">
<h3><span>school</span></h3>
<p>
<span>lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></p>
</div>
<div class="col-md-2">
<p> "2016-2019"
<br>
<span style="color: gray;">birmingham</span>
</p>
</div>
</div>
<br>
<!-- education high school -->
<div class="item">
<div class="col-md-7">
<h3><span>school</span></h3>
<p>
<span>lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></p>
</div>
<div class="col-md-2">
<p> "2016-2019"
<br>
<span style="color: gray;">birmingham</span>
</p>
</div>
</div>
</div>
</div>
<div class="item"></div>
<div class="container">
<div class="col-md-3">
<h1>work experience</h1></div>
<div class="col-md-9">
<!-- work experience assistant -->
<div class="item">
<div class="col-md-7">
<h3><span>school</span></h3>
<p>
<span>lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></p>
</div>
<div class="col-md-2">
<p> "2016-2019"
<br>
<span style="color: gray;">birmingham</span>
</p>
</div>
</div>
<br>
<!-- work experience-->
<div class="item">
<div class="col-md-7">
<h3><span>school</span></h3>
<p>
<span>lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></p>
</div>
<div class="col-md-2">
<p> "2016-2019"
<br>
<span style="color: gray;">birmingham</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- end section resume -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
</div>
</div>
</div>
<!-- end section resume -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
and heres css file
@charset "utf-8"; body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .item { margin-bottom: 50px; } img { object-fit: contain; height: auto; width: auto; } #imagelogo img { max-width: 70%; } div { margin: 0 ; padding: 0; display: block; } #sectionintro, #imagebanner { position:relative; overflow: hidden; } #sectionintro{ } .container-fluid { padding-left: 0px; padding-right: 0px; width: 100%; margin: 0; border-radius: 0px; border-width: 0px; overflow: hidden; position: relative; } .container { padding: 0; margin: 0 auto; position: relative; } #imagelogo { text-align: center; position: absolute; width: 100%; z-index: 99; margin: 0 auto; } #imagebanner { width: 100%; max-height:auto; max-width: inherit; margin:0 auto; height:500px; } #banner { width: 100%; height: auto; background-size: cover; background-attachment: fixed; background-origin: content-box; position: fixed; margin: 0 auto; display:; background: url(images/lakeside.jpeg) no-repeat; max-height: ; } #banner img { display: block; vertical-align:bottom; } #bio { color: #ffffff; background-color: #323232; z-index: 20; position: relative; padding: 40px 0; display:; } #resume { color: #32323; background-color:#cccccc; z-index: 20; position: relative; padding: 40px 0; margin: 0; } ul { margin-top: 0; margin-bottom: 0; } .navbar.navbar-default { border-width: 0px; border-radius: 0px; background-color: #202020; padding-left: 20px; padding-right: 20px; } } #resume { color: #32323; background-color:#cccccc; z-index: 20; position: relative; padding: 40px 0; margin: 0; } ul { margin-top: 0; margin-bottom: 0; } .navbar.navbar-default { border-width: 0px; border-radius: 0px; background-color: #202020; padding-left: 20px; padding-right: 20px; }
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment