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 Colette Pitamba
Colette Pitamba
2,662 Points

Working with grids, creating a website structure cross-browser problem

This is my first adventure as a coder. I am currently working on the "Build a Simple Website" video. Everything is going great except the bakery site is not loading properly on Google Chrome. It shows fine on Safari the way everything is suppose to look, but on Chrome, text is not where it's suppose to be.
The normalize.css link is in there...Am I missing something else?

Thanks is advance to any help with this issue.

14 Answers

Hardik Dangar
PLUS
Hardik Dangar
Courses Plus Student 856 Points
Hardik Dangar
Hardik Dangar
Courses Plus Student 856 Points

Hey Colette,

Can you post your code into http://jsfiddle.net

so i can check what's wrong with the code.

Colette Pitamba
Colette Pitamba
2,662 Points
Colette Pitamba
Colette Pitamba
2,662 Points

I don't mind, but I am not sure how to use jsfiddle.

Colette Pitamba
Colette Pitamba
2,662 Points
Colette Pitamba
Colette Pitamba
2,662 Points

Here is a shared link http://jsfiddle.net/LDbQC/

Hardik Dangar
PLUS
Hardik Dangar
Courses Plus Student 856 Points
Hardik Dangar
Hardik Dangar
Courses Plus Student 856 Points

It's easy

1) open http://jsfiddle.net/

2) in Html section Add Html code.

3) in Css section add css code.

4) In Javascript section add javascript code

5) Click on "Save" button at top.

6) Now in top menu there is share option. copy the share link and post it here.

For reference check out, http://jsfiddle.net/pborreli/pJgyu/

Hardik Dangar
PLUS
Hardik Dangar
Courses Plus Student 856 Points
Hardik Dangar
Hardik Dangar
Courses Plus Student 856 Points

can you update your jsfiddle with your grid.css code ? just copy the grid.css code and add it to css section. and update from top button and share the url.

Colette Pitamba
Colette Pitamba
2,662 Points
Colette Pitamba
Colette Pitamba
2,662 Points

Yes, here is the link with the grid.css added http://jsfiddle.net/LDbQC/

Hardik Dangar
PLUS
Hardik Dangar
Courses Plus Student 856 Points
Hardik Dangar
Hardik Dangar
Courses Plus Student 856 Points

i think you have forgot to update it/ it's old link.

Colette Pitamba
Colette Pitamba
2,662 Points
Colette Pitamba
Colette Pitamba
2,662 Points

I'm sorry about that. Here is the new link http://jsfiddle.net/HjGpw/

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Collete -

Check out this guide to Codepen.io, it's like a modern version of jsfiddle.

Check out this example on codepen

Hardik Dangar
PLUS
Hardik Dangar
Courses Plus Student 856 Points
Hardik Dangar
Hardik Dangar
Courses Plus Student 856 Points

Hey Collete,

You need to use grid classes properly.

what i have been able to find is,

Where h2 tag starts you haven't use grid classes to wrap it tags.

If you are using grid then you need to wrap them in proper tags just like you have done with logo and navigation.

Hope this makes sense.

Colette Pitamba
Colette Pitamba
2,662 Points
Colette Pitamba
Colette Pitamba
2,662 Points

@James

Thank you, I will be looking into it.

Colette Pitamba
Colette Pitamba
2,662 Points
Colette Pitamba
Colette Pitamba
2,662 Points

@James

Thank you, I will be looking into it.

Colette Pitamba
Colette Pitamba
2,662 Points
Colette Pitamba
Colette Pitamba
2,662 Points

@Hardik

Thanks a lot. I'm going to look over through it and adjust changes.

Colette Pitamba
Colette Pitamba
2,662 Points
Colette Pitamba
Colette Pitamba
2,662 Points

So here are the results from Codepen http://cdpn.io/mCkvH

I looked into the problem and I don't understand what I'm not wrapping right or how. Can you please explain in more detail.
The problem is the contact information. The email is near the middle of the page instead of the right near contact. Also, I have no idea why its showing up in Chrome with know issues.