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.

JavaScript

Two issues with my code

Hi I've been working on a random quote generator on Codepen and I moved my code from there to my workspace. Here's my pen:

http://codepen.io/edward-hong/pen/wMzyyN

and here's a snapshot of my workspace:

https://w.trhou.se/qipj8uggx1

The previews are different in two ways.

When you click "new quote", the tweet this quote link is left aligned in workspace and even though I want it to be centered aligned like it is in Codepen.

The background image is linked from an external site in Codepen. In workspace, I tried uploading to the same picture and then linking with the code body {background-image: url("img/background.jpg");} in css but it's not rendering.

I've tried using a tool to check the differences in text and other than a slight changing the heading to "Random Quote Generator" from "Random Quote Machine" and adding <head> <html> tags etc. There's no other changes to the code.

Can someone please help me with this issue?

1 Answer

Looks like it's an issue with workspace and the way it renders code, I personally wouldn't use workspace for your own projects, try developing in a local environment.

The image for example if you open your inspector, is being rendered in base64, perhaps you can try and grab that img src and put it in your css background property, see if that fixes the background issue.

not sure I understand the issue with the text.

you forgot to close a property here, this might have something to do with your text not being align:

section {
  min-height: 100%
  margin: 0 auto;
  text-align: center;
  }