The problem is that you have some custom CSS which sets very exact positions of some elements. For example:
#site-title {
width: 408px;
height: 50px;
position: relative;
bottom: 110px;
left: 230px;
}
So on a cell phone that has a width of, say, 320px, the area for the site title is going to be wider than the width of the screen. Plus the left property of 230px is going to push the site title all the way to the right.
One way to get around this is to use something called a media query. A media query sets rules which are activated at certain screen widths. For example, add this to the end of your custom CSS:
@media screen and (max-width: 760px) {
#site-title {
bottom: 0;
left: 0;
}
}
You should see the site title now move back over to the left when you shrink the width of your screen down to about the general width of a tablet.
Unfortunately, I don’t have the time to go through all of your web elements, but I think you get the idea of what you need to do. You may want to add another media query that activates at, say, 420px, for cell phone widths.
