CODEWITHSUNDEEP
htmlioscssiphonetwitter-bootstrap
kfirba
kfirba

Reputation: 5441

Websites renders off the viewport on mobile

I've built a new website today: www.domanage.co.il. When I view it on my PC everything looks good on all viewports sizes. When I try to view it on my iPad or my iPhone it seems like the website is somehow "inside" the right side of the viewport.

photo (using browserstack for photo, but has also been checked on iPad and iPhone): enter image description here

I'm using Bootstrap as my main CSS which I'm overriding in my own CSS file which can be found here: http://pastebin.com/7v0Y7Uim

Any ideas why it might happen?

Upvotes: 0

Views: 44

Answers (1)

Steve Sanders
Steve Sanders

Reputation: 8651

You have some elements that are too wide to fit in their containers, which is causing the issue.

@media(max-width: 500px){
    .websites img, .applications img {
        width:150px;
        height:150px;
    }
    .btn-fixed-size {
        width:150px;
    }
    .btn-vlg {
        padding: 10px 5px;
    }
    .btn-fixed-size {
        width:145px;
    }
}

.col-xs-6 (these elements' container) only has something like 120px of space for the content on a 320px wide viewport. You are trying to put a 150px wide element inside of a 120px wide container. As a rule of thumb, I try to avoid having fixed pixel-based widths in my CSS for a responsive site. For images, just set them to max-width: 100% and height: auto to allow them to automatically resize.

Upvotes: 3

Related Questions