Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Java Spring Basics Creating Controllers and Views The Gift of Design

Dmitry Ponomarenko
Dmitry Ponomarenko
18,175 Points

My page doesn't look like on video

For some reason my Chrome (for Windows) has problems with displaying elements. My page looks messy: http://i.imgur.com/ZmWS7Ky.png

Maybe someone has an idea why this happens? Page looks normal on Firefox though. Also my project has a problem with importing "Varela Round" font:

http://i.imgur.com/nChHdGz.png

4 Answers

Rob Bridges
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Rob Bridges
Full Stack JavaScript Techdegree Graduate 35,459 Points

Hey Dmirty, this happened to me when I beta tested this course, go into the css and find the gif child class, and delete the height variable, delete the css value for height for the elemenet, and add it back in saving the app.css file when you're done. This is due to someway how chrome handles the import of our css.

Chris Ramacciotti Look! I'm not crazy!

Brent Jennings
Brent Jennings
628 Points

Thanks! This fixed the problem for me. The middle gif isn't formatted exactly the same (https://gyazo.com/62867dc3d0eccc9f8fc98bc93cca72c9), but it's hardly noticeable.

I have this same problem. Removing the height value from .gifs img nets me the same picture as posted by Brent with the middle image out of whack, however deleting cache does not resolve this. Also as mentioned by the OP the google fonts URL is showing an error in Intellij that says URI is not registered(Settings | L&F | Schemes and DTD's) but no real indication as to how to resolve this. Any help would be appreciated and thanks for a great course!

Rob Bridges
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Rob Bridges
Full Stack JavaScript Techdegree Graduate 35,459 Points

Hi Micheal, only real thing to do is go to the css file, and make sure that your height for the gif class that you had matches any of the other gifs, or maybe try adding like 10 pixels to it to see if it will make it line up.

Hi! Had the same issue - simply clearing browser cache resolved it.

David Dill
David Dill
3,956 Points

This worked perfect, definitely the better option.

aykutzdemir
aykutzdemir
8,655 Points

Thanks! Worked for me!

Jeremiah Shore
Jeremiah Shore
31,168 Points

for anyone interested, there are easier ways to do this...

chrome keyboard shortcuts

details about caches

CTRL + F5 seems to work best on Windows, although I am not sure on the specific differences between this and SHIFT + F5 (or CTRL + SHIFT + R) in Chrome.

Jordan George
Jordan George
9,926 Points

For OS X users, I used menu bar>develop>user agent>default

Kyle Case
Kyle Case
44,857 Points

I removed the height from .gif img {} selector. That worked to fix my problem. Does anyone know why the height of an image would cause such a seemingly unrelated issue?