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


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:


and here's a snapshot of my workspace:


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;