If you’ve been working with a Twitter page to complete the DS106 web storytelling assignment, you’ve probably run into a problem. Basically, Twitter has an interface feature that hides tweets until you scroll down to the bottom of the page. For a variety of reasons, this feature doesn’t work properly when you save a local copy of the page. After a little hunting around, I’ve found a “fix.” You’re going to need to copy and paste the following small code snippet and paste it into your coded page in your text editor. You’ll need to place it somewhere between the opening and closing head tags: <head>. . .</head>
Here’s the snippet you’ll need:
<style>
#front-container, #page-container {
overflow: visible !important;
}
</style>
What this does is overwrite a style that is in the original Twitter stylesheet, forcing the overflow of the main page container to become visible (instead of hidden as it is by default. That “!important” in this snippet of code is a way to tell the browser that this style should trump the default one.
Try that out and then upload your HTML file to your Web server if it works. If you’re still having difficulty, leave a comment describing what you did and what happened.
BTW, a few people have also been running into encoding problems when they’re working on these files. Here are some encoding tips:
- If you’re working in basic Notepad, when you save the file, you’ll see an option to choose an encoding for your file. Make sure you chose UTF-8.
- If you’re working in Notepad++, there is an Encoding menu. choose “UTF-8 without BOM.”
- If you’re working in TextWrangler (on the Mac), go to Edit>Document Options. In the Encoding drop-down, choose “Unicode (UTF-8, No BOM)”
Hope this helps everyone!
Thank you so much for the help! ^-^ Now we can see most of the work I put into the webstories assignment!