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

Posted by Justin Hicks
Justin Hicks
14,290 Points

CSS styling on a practice website problems

I have a simple practice website of completely made up material and I'm having problems with certain styling. Its a lot of code both html and css, so I'm wondering how can I get help and suggestions with it? Do I just need to ask my questions and include all the code? Or Just give the name of the website?

3 Answers

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi.

I think it would be good if you give the link to the site, explain whats been bugging you and provide the code for those sections that you would like to get some feedback or help.

I think you came to the right place for help. There are a lot of smart people here :)

Justin Hicks
Justin Hicks
14,290 Points
Justin Hicks
Justin Hicks
14,290 Points

The site link is http://www.justinhicks.design/sparklelaunch.html. The first thing I'm having problems with is the white space at the very top of the page, I cant seem to get rid of it. Keep in mind I have not yet been able to start on a desktop version of this so its mobile size currently.

.top {
     float: left;
     text-align: center;
     background: linear-gradient(#1874CD, white);
     margin: 0 0 5px 0;
     padding: 5px 0 0 0;
     width: 100%;
     font-size: 20px;
     color: #0E457B;

 }

#description {
               float: left;
               font-size: 20px;
               color: slategrey;
   }```
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi Justin Hicks

The whitespace is set by your #description id CSS style - make sure you add "margin-top: 0;" this will override the default browser styling ----> a good advice is to add normalize.css or if you prefer to start with absolutely no default styling you can add reset.css (you can find them both with Google).

Justin Hicks
Justin Hicks
14,290 Points
Justin Hicks
Justin Hicks
14,290 Points

The second Problem is that I cant get the image columns to even space so they have the same space between the images. I've been trying for 2 columns with 4 images per column.

#areas {
       list-style: none;
       display: inline-block;
       text-align: center;

}

#areas li {
       float: left;
       width: 45%;
       margin: 2.5%;
       background-color: #f5f5f5;
       color: #bdc3c7;
 }

 #areas li a p {
        margin: 0;
        padding: 5%;
        color: #1874CD;
  }