Create Your First Local HTML/CSS Project

Hello, I am having a problem with paragraphs and a GIT logo getting mixed with other text when a window is resized. Can you please help me solve this, its been over a week that I am dealing with this. The screenshot is down below.

HTML

<body>
<!-- Header Section-->
    <header>
        <div class="header-1">
            <h1 class="h1-1">GitHub</h1>
            <h1 class="h1-2">GIT CHEAT SHEET</h1>
        </div>
        <img src="../Images/Github-PNG-images--50png.png" 
                 class="logo" alt="Git Logo">
        <!-- Divider -->
        <div class="header-2">
            <p class="header2-p">
               Git is the free and open source distributed version control 
               system that's responsible for everything GitHub related that 
               happens locally on your computer. This cheat sheet features 
               the most important and commonly used Git commands for easy
               reference. With platform specific installers for Git, 
               GitHub also provides the ease of staying 
               up-to-date with the latest releases
               of the command line tool while providing a 
               graphical user interface for day-to-day 
               interaction, review, and repository
               synchronization</p>
        </div>
    </header>
<!-- Main Section -->
    <section>
        <div class="info-left-1">
            <h3 class="param-head">INSTALLATIONS & GUIS</h3>
                <p>With platform specific installers for Git, 
                    GitHub also provides the ease of staying 
                    up-to-date with the latest releases
                    of the command line tool while providing a 
                    graphical user interface for day-to-day 
                    interaction, review, and repository
                    synchronization.</p>
            <p class="param-head">GitHub for Windows</p>
                <a href="https://windows.github.com">https://windows.github.com</a>
            <p class="param-head">GitHub for Mac</p>
                <a href="https://mac.github.com">https://mac.github.com</a>
                <p>For Linux and Solaris platforms, the latest release is available on the official Git web site.</p>
            <p class="param-head">Git for All Platforms</p>
                <a href="http://git-scm.com">http://git-scm.com</a>
        </div>
        <!-- Divider -->
        <div class="info-left-2">
            <p class="param-head">SETUP</p>
                <p>Configuring user information used across all local repositories</p>
        </div>
        <div class="info-left-3"></div>
        <!-- Divider -->  
        <div class="info-left-4"></div>
        <!-- Divider -->  
        <div class="info-left-5"></div>
        <!-- Divider -->  
        <div class="info-left-6"></div>
        <!-- Divider -->  
        <div class="info-right-7">
            <h3 class="param-head">STAGE & SNAPSHOT</h3>
                <p>Working with snapshots and the Git staging area</p>
            <p >git status</p>
                <p>show modified files in working directory, staged for your next commit</p>
            <p>git add [file]</p>
                <p>add a file as it looks now to your next commit (stage)</p>
            <p>git reset [file]</p>
                <p>unstage a file while retaining the changes in working directory</p>
            <p>git diff</p>
                <p>diff of what is changed but not staged</p>
        </div>
        <!-- Divider -->  
        <div class="info-right-8"></div>
        <!-- Divider -->  
        <div class="info-right-9"></div>
        <!-- Divider -->  
        <div class="info-right-10"></div>
        <!-- Divider -->  
        <div class="info-right-11"></div>
    </section>

    <footer>

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

CSS

body {
    box-sizing: border-box;
    margin: 0 auto;
}
header {
    margin: 0;
    height: 280px;
    width: auto;
}
h1 {
    color: aliceblue;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 50px;
    margin-right: 20px;
}
img {
    margin: 0;
}
img.logo {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 35px;
    top: 40px;
    float: right;
}
.h1-1 {
    font-size: 28px;
    margin: 0;
    padding-left: 50px;
    padding-top: 50px;
}
.h1-2 {
    font-weight: 200;
    margin: 0;
    padding-left: 50px;
    padding-top: 10px;
}
.header-1 {
    height: 180px;
    background-image:url(../Images/milky-way.jpg);
    background-size: cover; 
}
.header-2 {
    margin-top: 0;
    height: 100px;
}
.header2-p {
    background-color: rgba(10, 70, 50, 0.2);
    margin: 0;
    padding: 20px 50px;
}
section {
    display: block;
    position: relative;
}
.info-left-1, .info-left-2, .info-left-3, .info-left-4, .info-left-5, .info-left-6 {
    margin: 10px 10px 50px 50px;
    width: 45%;
    float: left;
}
.info-right-7, .info-right-8, .info-right-9, .info-right-10, .info-right-11 {
    margin: 10px 50px 50px 10px;
    width: 45%;
    float: right;
}
.param-head {
    font-weight: bold;
}
![Screen Shot 2022-03-18 at 2.45.33 PM|226x500](upload://ucFatmRkgk859KyVQzAnueMdKCK.png)

It seems like the problem is surrounding fixed heights. You have fixed px heights on all of your elements, which means that the webpage isn’t going to be particularly responsive. On header you have a fixed height of 280px, and on header-2 a fixed height of 100px. This is fine on wider screens, but on a phone screen the content wants to take up a lot more space than that. However in CSS, a container will never grow past a fixed size if the content is larger, thus you get text overflowing into the next element.

There’s a few things you can do about this.

  1. The first is the simplest but least neat: simply add overflow: hidden; or overflow: scroll to your header element. It doesn’t look great but it stops the overflow and contains the text to it’s size.

  2. Another is to remove the fixed heights completely, replacing them with either variable height (using breakpoints or percentages depending on how much you’ve encountered so far). Or in this particular case it seems you can remove the fixed heights entirely with no loss of clarity, and this also removed the overflow issue. This is because without a fixed height, the container defaults to taking up as much space as the content requires.

  3. A more advanced alternative would be replacing using heights and floats with a framework like grid or flexbox. If you have never encountered these before don’t worry, they should come up in the Web Development and CSS paths, however they remove a lot of these kinds of issues by giving a proper structure to a webpage without having to fiddle with every element. Again, if you haven’t encountered these before don’t worry so much as you will learn about these later. But I wanted it to be known there are better options coming.

Hopefully that helps fix your issue! In the case of this project you can really do whatever works, and then refine it as you learn more. That’s the benefit of these kinds of projects, you can see your progress as you go along.

2 Likes

Thank you Adam so much, I just removed heights completely and it worked well. God Bless You. Thank you. :pray: