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

Java Spring Basics Creating Controllers and Views The Gift of Design

Posted by 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
.a{fill-rule:evenodd;}techdegree seal-36
Rob Bridges
Full Stack JavaScript Techdegree Graduate 35,467 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.

Michael Van Dusen
Michael Van Dusen
12,136 Points

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
.a{fill-rule:evenodd;}techdegree seal-36
Rob Bridges
Full Stack JavaScript Techdegree Graduate 35,467 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.

countingsheep
countingsheep
483 Points
countingsheep
countingsheep
483 Points

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
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
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?