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 Megan O'Neill
Megan O'Neill
1,990 Points

Tiny little problem that I can't fix >:(

Hi everyone, if someone could help me I would be over the moon!

I've just made and uploaded my first website. It's almost done, but there is one thing that I just CANNOT fix and I've been at it all afternoon!

If you go to www.meganoneill.com.au/Contact.html , you will see that the links that are down the bottom are not in a nice row like they're supposed to be. The first and the last link are squishing on top of each other. I know this is probably the simplest of problems but the stylesheet for my Contact.html page is exACTly the same as the stylesheets for all the other pages, as are the html pages, and the other pages are not like that! For the life of me I can't see why this page should be any different!

If someone could please have a look for me that would be awesome. I'm going to go drown my frustrations in chocolate now. Thanks.

-Megan.

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Hey Megan, couple of things really stand out on the site and I'd like to mention them

When there is a decent amount of text such as on the about page, make the text-align: left. It may seem neater to have everything center, but it destroys what we call reading gravity and isn't good typography. For the same reason, put your images on the right so they don't disrupt the flow of text by being at the left margin.

And the main page image is HUGE on a mobile lol not sure if you noticed.

Good luck!

5 Answers

Paul Linger
Paul Linger
1,676 Points
Paul Linger
Paul Linger
1,676 Points

Right Megan, it seems that you've added a little something extra on the contact page for the div. The "grid12" on the other pages isn't followed by "omega". That could cause some issues. As for "blank.jpg" on the home page, there doesn't seem to be an image in that directory.

Megan O'Neill
Megan O'Neill
1,990 Points
Megan O'Neill
Megan O'Neill
1,990 Points

Thanks so much everyone for your help. What I ended up doing was just deleting the whole html & css page and doing it again. For some reason that worked :/

Before doing that I did play around with omega and it had no affect, thanks anyway.

And yes, I haven't made the image yet but I'm working on it :)

Oh and does anyone know why on earth 2 of the photos in my site should appear sideways when viewing the page from a mobile device yet they had always been the right way up on my computer and are also the right way up when viewing from a computer? That one is a real mystery to me. Ta.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Start by removing some right padding on the links. That will sort it. It's just that it's run out of space.

Megan O'Neill
Megan O'Neill
1,990 Points
Megan O'Neill
Megan O'Neill
1,990 Points

Thanks, but that didn't seem to work. One of my photos isn't loading either, and for some reason 2 of the photos on the site appear sideways on my phone

D:

I'll give it a few minutes and see if it's not just that all the files haven't transferred properly through yet.

Michael O'Malley
Michael O'Malley
4,293 Points
Michael O'Malley
Michael O'Malley
4,293 Points

Within the style_Lesson_pricing.css, I would play around with the following settings:

ul {
    list-style:none;
    font-size: .75em;
    text-align:center;
}

ul li {
    display:inline;
    margin-right:3em;
}

a {
    display:inline_block;
}

I would also recommend adding a class to the ul and specifying it in the CSS.