my website http://ridwan.me appears fine on chrome, ie and firefox on my laptop and desktop, but the right hand side along with a fair chunk of the content is cut off when viewing the site from most mobiles.
I’ve seen other threads here with a similar issue and tried adding a meta viewpoint tag in the html header, which only made things worse. Even adjusting the css container size to 1100px didn’t help much.
If anyone could check through the code and lend a hand in solving the issue I’d be very grateful.
All the same, you need to do that to make the site ‘responsive’ in the usual meaning of the term. Add that code in, and then we can guide you on the next part of the job.
You get the same effect on desktop if you narrow your screen to 1000px and then try to scroll right.
You have set the container to 1200px width but your wrappers are percentage width and have overflow:hidden so anything smaller than the viewport is hidden.
Try adding min-width to the body element.
body{min-width:1200px}
But as Ralph said if you want to support mobile properly you need to use the viewport meta tag and media queries to reduce the width of that display into a single column.
