Articles Tagged ‘CSS’

Responsive Sidebar in a Modal Window to Avoid Having to Scroll

Many responsive designs push the sidebar (or sidebars) below the main content area at narrower browser window sizes. Nothing wrong with this type of design, it makes sense to have the main content come first. Viewing the content in the sidebar on devices with small screens, however, could mean quite a bit of scrolling. A responsive sidebar in a modal window can solve this.

Responsive Web Design Basics

The number of browsers and devices that are used to surf the Web is much larger than just a few years ago. All these devices have different properties. Large or small screens, high or low resolution, different bandwidth at different locations and so on.

To view a website in the best possible way, no matter the device, a design that automatically adjusts depending on the characteristics of the device that loads it, can be used. This type of Web design (responsive Web design) is usually carried out by making everything fluid/elastic, and with the help of CSS3 media queries.

Scroll to Top Animation with jQuery & CSS

An in-page link for scrolling the page to the top, is nothing new. Many years ago it was quite popular to put one in footer. Then they disappeared from most sites for a long time, and now (or maybe a year back or so) they’re gaining popularity again. Sometimes you see scroll to top links positioned at fixed locations to the bottom of the viewport as you scroll down a page, and sometimes as conventional links within – or just above – the footer.