Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Younes Zoughbi
Younes Zoughbi
6,233 Points
Posted by Younes Zoughbi
Younes Zoughbi
6,233 Points

My first website. Trouble removing unnecessary "white space".

Hello everyone, I've finally put to use some HTML and CSS skills I've learnt here at Treehouse, on my first practice website.

I'm having issues with white space that i would like to remove. Especially if you resize the window suiting a mobile device.

If anyone has any solutions, I would really appreciate it.

i've included only the index.html and the relevant css code. Please let me know if you require more code, as I haven't included everything.

Also, please share your thoughts on the website as a whole. As I know it does need improving. www.yzoughbi.com As this is the basic foundation of the site, I can now add bits of code to it.

Any feedback would be great.

Thank you

Code Below:

<!DOCTYPE html>
<html>
    <head>
        <title>YZ | Home</title>
        <link href="main.css" type="text/css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    
        <meta http-equiv="Younes Zoughbi"/>
        <meta charset="ISO-8859-1">
    </head>
    <body>
        <div class="wrapper">
            <h1>Younes Zoughbi</h1>
                <ul  class="nav">
                    <li id="current"><a href="index.html">Home</a></li>
                    <li><a href="gallery.html">Gallery</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
        <div id="banner">
        <img id="banner-image" alt="Zen Garden" src="Gallery/zengarden.jpg">
        </div>
            <p class="page">Hello, my name Is Younes. I'm live in West London, UK.
            <br>I'm a Junior Web Developer currently skilled in HTML, CSS, Javascript and Illustrator.</p>
            <p class="page">I shall be updating the website with photography posts and HTML/CSS/Javascript snippets/creations, as I continue my journey in Web Development.</p>
        </div>
        <div id=social>
            <a href="https://www.instagram.com/why_zed_tho/" class="fa fa-instagram"></a>
            <a href="https://www.linkedin.com/in/youneszoughbi" class="fa fa-linkedin"></a>
            <a href="mailto:yzoughbi@gmail.com" class="fa fa-google"></a>
        </div>    
        <div class="footer">&#169; Younes Zoughbi 2018</div>
    </body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    font-family: sans-serif, monospace;
    background-color: rgb(255,255,255);
    height: 100%; 
}
body {
    margin: 0;
    padding: 0;
    text-align: center;
    max-height: 100%;
}
.wrapper {
   min-height:  100%;
}
.footer,
.push {
    height: 30px;
    padding-top: 20px;
    margin-top: 50px;
    margin-bottom: 0;
    position: relative;
}
.footer {
    font-weight: lighter;
    text-align: center;
    background-color: #e6e6e6;
    font-size: 0.75em;
    color:  rgb(100,100,90);
    padding: 25px 25px 30px 25px;;
    width: 100%;
    overflow: hidden;
    clear: both;
    bottom: 0;
    height: 20px;
}
Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

When posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down: Ā  Or watch this video on code formatting.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Code looks much better now! :+1:

But other than on the sides (due to centering) I'm not seeing any significant whitespace to remove. Can you be more specific?

Also make sure that the excerpt actually exhibits the same issue as the full code might.

2 Answers

Younes Zoughbi
Younes Zoughbi
6,233 Points
Younes Zoughbi
Younes Zoughbi
6,233 Points

Thank you Steven, hopefully that's much clearer.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

You could paste a screenshot of what you're experiencing :)

Younes Zoughbi
Younes Zoughbi
6,233 Points
Younes Zoughbi
Younes Zoughbi
6,233 Points

Sorry, but how do I post a screenshot on here? I take it HTML tags will not result in showing here either?

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

You're limited to using markdown for formatting, but it does support images and links. The rest of that Markdown Basics course covers those. And since you have your own website, you could host your screeshot there.