CODEWITHSUNDEEP
csshtml
jsimmons84
jsimmons84

Reputation: 1

How to i remove blank space from my website html

<!DOCTYPE html>

    <html lang="en">
    <head>
        <!-- jQuery from CDN -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">    </script>
          <script src="js/jribbble.js"></script>
      <script src="js/bootstrap.js"></script>
    <script>
    {
    $(document).ready(function()
    //Paste your Client Access Token in the line below within quotes - you can build your API from https://dribbble.com/account/applications 
    $.jribbble.setToken('cca05ddeb756f269c5918ef26e50336f973d2e4146bbd80ec8ee87af31dd05a0');
    $.jribbble.users('_koreyhall').shots({per_page: 36}).then(function(shots) {
    var html = [];

    shots.forEach(function(shot) {
        html.push('<div class="col-sm-6 col-md-4 col-lg-4"> <div class="grid-list">');
        html.push('<a href="' + shot.html_url + '" target="_blank">');
        html.push('<img class="img-responsive" src="' + shot.images.normal + '" alt="' + shot.title + '"><\/a>');
        html.push('<div class="overlay"><a target="_blank"  href="' + shot.html_url + '">');
        html.push('<h2>' + shot.title + '<\/h2>');
        html.push('<\/a> <\/div><\/div><\/div>');
    });

    $('#shots').html(html.join(''));
    });
});

        </script>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">

    <title>About | Portfolio by Korey Hall</title>

    <!-- Bootstrap + Font Awesome + Main CSS -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- customize this file if needed -->
    <link href="css/main.css" rel="stylesheet">
      <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>
    <div class="wrapper">
        <div class="container">
            <header>
                <div class="row">
                    <div class="navbar">
                        <div class="navbar-header">
                            <button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button"><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="index.html">KOREYHALL</a>
                        </div>

                        <div class="collapse navbar-collapse">
                            <ul class="nav navbar-nav">
                                <li>
                                    <a href="about.html" class="active">About</a>
                                </li>

                                <li>
                                    <a href="blog.html">Blog</a>
                                </li>

                                <li>
                                    <a href="portfolio.html">Portfolio</a>
                                </li>

                                <li>
                                    <a href="contact.html">Contact</a>
                                </li>
                            </ul>

                            <ul class="nav navbar-nav social">
                                      <li><a href="#"> <i class="fa fa-facebook"></i> </a></li>
                                      <li><a href="#"> <i class="fa fa-twitter"></i> </a></li>
                                      <li><a href="#"> <i class="fa fa-dribbble"></i> </a> </li>  
                                      <li><a href="#"> <i class="fa fa-linkedin"></i> </a></li>
                                      <li><a href="#"> <i class="fa fa-envelope"></i> </a></li>
                            </ul>
                        </div><!-- /.nav-collapse -->
                    </div><!-- /.navbar -->
                </div>

                <div>
                        <h1 class="intro">About Me</h1>

                        <div class="about">
                            <p class="about">
                                <span>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. It has survived not only five centuries, but also the leap into.</span>
                        </div>
                    </div>
            </header>

        </div>
    </div>

    <footer>
        <div class="container">
            <nav class="nav-footer">
                <ul>
                    <li>
                        <a href="about.html" class="active">About</a>
                    </li>

                    <li>
                        <a href="blog.html">Blog</a>
                    </li>

                    <li>
                        <a href="portfolio.html">Portfolio</a>
                    </li>

                    <li>
                        <a href="contact.html">Contact</a>
                    </li>
                </ul>

                                  <ul>
                                      <li><a href="#"> <i class="fa fa-facebook"></i> </a></li>
                                      <li><a href="#"> <i class="fa fa-twitter"></i> </a></li>
                                      <li><a href="#"> <i class="fa fa-dribbble"></i> </a> </li>  
                                      <li><a href="#"> <i class="fa fa-linkedin"></i> </a></li>
                                      <li><a href="#"> <i class="fa fa-envelope"></i> </a></li>
                                  </ul>

                <p class="credits text-center">&copy; All Rights Reserved 2016</p>
            </nav>
        </div>

    </footer>
</body>
</html>

enter image description here

How do I remove the blank space between About me + the Loreum Ipsum? many thanks to those who can help me, also is the 'active' tag correct as it is not working in this code

Upvotes: 0

Views: 68

Answers (2)

Johannes
Johannes

Reputation: 67748

You have this in there:

<h1 class="intro">About Me</h1>
      <div class="about">
          <p class="about">

Erase the class="about" in the <p> tag (i.e. make it a regular <p> tag without any class) - this should reset the distance to the "About me" header to the normal extent (right now it's doubled).

Upvotes: 1

MrWitts
MrWitts

Reputation: 135

This should be it. Add "style="margin:0"

<h1 class="intro" style="margin:0">About Me</h1>
                    <div class="about">
                            <span>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. It has survived not only five centuries, but also the leap into.</span>
                    </div>

Is this what you were looking for?

Upvotes: 0

Related Questions