After a few months of blogging and giving tutorials on Weebly and its template, I would like to share this GOLDEN TIP (discovered lately) for those who are editing their site specially inserting third party widgets and CSS3 effects. This tip will solve your problem regarding the appearance of scroll bars in your widget caused by unedited overflows.
You may encounter widgets with overflowing contents like my samples below. Although some of my earliest tutorials need to be edited to add this styling.
1.Weebly Tricks #53 - Sticky Content on Scroll
2. Weebly Tricks #52 - Card Deck Slideshow
3. Weebly Tricks #51 - Responsive Toggle Menu
This widgets requires more space than the defined dimensions on their respective styles specially when they are executing their animations. Weebly, by default sets your HTML container like the "embed code" element with the overflow X and Y into "hidden". If not edited, some part (edges) of your widgets wouldnt show up and scroll bars will be visible.
Since the block of code that points to that certain area can't be seen on your main-style.css, you need to override the styling that was set inline to your "embed code" element. To do that, we simply use the following:
<style>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>
You may place it either to a single page, same lay outs or even to your whole site. Where to put this code? Please read my earlier topic " 3 Ways in Editing Weebly's <head>" so that you know the right place to paste it. Wrong placement of the code can ruin your site.
Once you published your site, you might be surprised that little errors on overflows will be corrected and the whole flavor of your desired effect will be activated. This is a simple tip yet could save the day of countless Weebly users.
So how do you like this food for thought? Is this helpful?
0 comments: