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

HTML How to Make a Website CSS: Cascading Style Sheets Take a Mobile-First Approach

Mark Darling
Mark Darling
553 Points
Posted by Mark Darling
Mark Darling
553 Points

Workspaces Error/Issue - #logo{} CSS not centering after edits

I have been following along with Nick's videos and everything has worked fine up until we define the anchor tag id as "logo" and add the corresponding CSS code.

I triple checked my work and made sure everything was identical and proper... and it was, yet every time I saved my work and previewed to look for the change, my logo would not center. I even tried closing my browser out altogether and restarting it - still nothing.

Next, without touching any of my code I was poking around in workspaces and selected "fork workspace" which I guess basically reloaded my workspace on the TTH server side?

Anyways, without touching anything still, I hit preview and now my preview matches Nick's in the video with the logo centered. Next, for clarity, I deleted the #logo{} block from my CSS code and then re-saved my work and selected to preview my work again. This time, my logo remained centered and unchanged as if the #logo{} block was still present in my CSS code.

I think this is more of a browser/server/workspaces issue than anything.

-My $.02

EDIT:

Whenever I open workspaces I right click on the pop up window it brings up in chrome and select to "show as a tab" so that when I click on the little (eye) icon preview to show me my updated page after I'm done editing and saving it, it will open it in a new tab on my workspaces (tabbed) window.

I just found out that pressing the (eye) icon for an updated page preview apparently isn't the same as pressing f5 to refresh that browser tab specifically.

Hope this helps!

5 Answers

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hey! No problem! Glad you had it working properly now :)!

Another thing you can try when this happen to you is using the developer tools from chrome to check if your code actually got updated/saved or not! That's something I find really helpful not only for that but to try live different things in css/html itself.

Cheers!

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hi Mark! Could you paste the forked workspace here for us to check? Everytime you save your workspace and refresh the page the changes should come visible...they are just html and css changes that should not be saved at your cache or anything like that so it would be handy if we can check your code instead of just start guessin' what could be causing such problem.

Cheers!

Mark Darling
Mark Darling
553 Points
Mark Darling
Mark Darling
553 Points

Do I use the workspace snapshot function or just copy and paste the URL for my workspace right from its tab? I have confirmed my code is good at this point and can make it work/break on command depending which method I use to refresh my page previews.

Mark Darling
Mark Darling
553 Points
Mark Darling
Mark Darling
553 Points

Here is a snapshot of my "follow along" code:

https://w.trhou.se/kkfe1c25k3

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

allright! I checked it and from the start it's centered...then I opened the css file and deleted the #logo block , saved it and refreshed the page (f5 or previewing it again) and it wasn't centered anymore... I added the code again just to check and save it and refreshed and it was centered again... so it seems everything is working properly on your code :D! Maybe you are mixing something up when "saving/refreshing" your work?

Mark Darling
Mark Darling
553 Points
Mark Darling
Mark Darling
553 Points

No, everything I described was 100% accurate and any saving of my work is happening within workspaces as is my refreshes (whether its the icon or f5). However, I did just notice myself that now it is again working properly whether I choose the preview icon or use f5 on an existing preview tab- hence why I think it may be a server thing or something like that. I wonder if it has to do with server load / peak operating hours for TTH.com?

Regardless, like I said, I knew my code was correct and yet the preview icon was not completely refreshing the tabs it was opening with the updated code which had me stumped since workspaces had been acting as it should until just a little bit ago when I came upon this quirk. Now that I know about this quirk, I will know where to look and what to consider in the future. I just thought others might benefit from this thread and save some time and frustration.

Alternatively I know I can test code locally by just saving simple text files with the proper file types and use chrome directly to execute said files. This is helpful for troubleshooting issues like this that seem to be directly related to workspaces or using a 3rd party coding console that is "live".

THANK YOU very much for taking your time to look into this with me- I really appreciate it!

Jairo Niño
Jairo Niño
2,346 Points
Jairo Niño
Jairo Niño
2,346 Points

Same problem here Mark. This thread was a lot of help. I can't make it work properly so I guess I'll just wait.