Media Queries Horizontal Scroll Issue

Responsive Design are great, but it is not easy to do. Horizontal Scroll always attack your responsive project. How to remove it ?

1. Add max-width property. Why ? max-width help limit the width.

  @media screen and (max-width: 960px) {
body { 
...
max-width: 970px;
}

2. Using overflow-x property. overflow-x help hide all elements outside the specified width. More about overflow

  @media screen and (max-width: 960px) {
body { 
...
overflow-x: hidden;
}

You Step On The Finish Line

One most important things in Responsive Web Design work. Try put the code in your body. If it work, i hope you like it

Continue reading this article

Pure CSS3 Animated Checkbox

Josua Hibbert - He build an amazing checkbox. It pure CSS, no sugar, salt, preservative. That great work forked by more than 100 peoples. With great checked indicator. You will never forget it.

This could be helpful if you want insert it to registration form or login form and say "Remember Me" or "Send  Me Weekly Newsletter". 

HTML

The markup is contain default checkbox code and without class or id.

<input type="checkbox">

CSS

This checkbox is controlled by CSS3.

input {
    display: block;
    margin-bottom: 20px;
}

/* Checkbox */

input[type="checkbox"] {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
                      -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, 5px 0;
    border-radius: 25px;
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
                inset 0 0 10px hsla(0,0%,0%,.5),
                0 0 0 1px hsla(0,0%,0%,.1),
                0 -1px 2px 1px hsla(0,0%,0%,.25),
                0 2px 2px 1px hsla(0,0%,100%,.5),
                0 -2px 10px 2px hsla(0,0%,100%,.75),
                0 2px 10px 2px hsla(0,0%,0%,.25);
    cursor: pointer;
    height: 10px;
    padding-right: 10px;
    position: relative;
    width: 20px;
    -webkit-appearance: none;
    -webkit-transition: .15s;
}
input[type="checkbox"]:after {
    background-color: #eee;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border-radius: 25px;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
                inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
                0 1px 3px 1px hsla(0,0%,0%,.5),
                0 0 2px hsla(0,0%,0%,.25);
    content: '';
    display: block;
    height: 10px;
    left: 0;
    position: relative;
    top: 0;
    width: 10px;
}
input[type="checkbox"]:checked {
    background-position: 0 0, 15px 0;
    padding-left: 10px;
    padding-right: 0;
}
input[type="checkbox"]:hover:before {
    background: hsla(0,0%,0%,.25);
    border-radius: 10px;
    color: #e4ded4;
    content: '✘';
    font: 12px/20px sans-serif;
    height: 20px;
    left: 25px;
    letter-spacing: 1px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: -5px;
    width: 20px;
}
input[type="checkbox"]:checked:hover:before {
    content: '✔';
}

That's All

I Hope you like it and thank you for reading

Continue reading this article