I recently launched my first responsive design website, which you can view here
After testing the responsiveness on Chrome and FF by resizing the window, everything seemed to be working fine. However, when I checked it on my phone, the layout appeared identical to what I see on my desktop.
Below is a snippet of my CSS code:
@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Lato:300,700);
html {
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 1.2em;
background-color: #FFF;
color: rgb(68, 68, 68);
font-weight: normal !important;
-webkit-font-smoothing: antialiased;
}
.side-container {
margin: 0;
padding: 0;
padding-right: 0;
}
.sidebar {
width: auto;
position: fixed;
overflow-x: auto;
overflow-y: auto;
background-color: transparent;
float: left;
border-left: 740px solid transparent;
padding: 50px 0 0 0;
}
.main-content-wrapper {
margin: 0;
width: 620px;
padding: 60px 60px 200px 60px;
position: absolute;
}
.postcont.main-content-wrapper, .main-content-wrapper {
margin: 0;
}
::selection {
background: #202020;
color: #fff;
text-shadow: none;
}
.ease {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
... (CSS code continues)