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 trialWilson Usman
35,206 PointsHow to fix the app.pug CSS in the Flashcards tutorial?
I spent a lot of trying to research this myself without any success.
In my app.pug file here is what I have:
extends layout
block main
section.namecard
.namecard-login
if name
p.namecard-greeting Welcome, #{name}!
form.namecard-exit(action='/goodbye', method='POST')
button(type='submit')
img(src='/static/img/close.svg')
else
p.namecard-greeting Hello, student!
block intro
block card
But this is what I get:
Can someone lead me in the right direction or let me know if you need any other code.
FYI I've even gone through and replaced all the files with the download files. I tried changing the .namecard-greeting to .namecard-hello and that still didn't look right. It added the border, but the padding was off and the exit button was still displaying the same.
Solution:
But I still don't understand why it's not setup this way on the video.
extends layout
block main
section.namecard
.namecard-hello // Changed it to .namecard-hello and it works now
if name
p.namecard-greeting Welcome, #{name}!
form.namecard-exit(action='/goodbye', method='POST')
button(type='submit')
img(src='/static/img/close.svg')
else
p.namecard-greeting Hello, student!
block intro
block card
Nick Hericks
Full Stack JavaScript Techdegree Graduate 20,704 PointsThanks for posting this Wilson!
1 Answer
Peter Gess
16,553 PointsFor whatever reason the space where content-header-question/answer.png files are is grayed out. Guessing it may be a CSS issue? Did you have any issues with this?
Shawn Casagrande
9,501 PointsI had to add side to the templateData object in card.js
Nick Edwards
18,388 PointsNick Edwards
18,388 PointsThank you for your post! That was driving me nuts and I couldn't figure it out.