Search code examples
htmlcsstwitter-bootstrapresponsive-designmobile-website

My bootstrap website images are not showing correctly on mobile devices after uploading to the server


I made this website with bootstrao- andamios.cl It is perfect on desktop. I have checked it through chrome's different viewport. it works fine as a full responsive website but when i uploaded it to the server and visited the site with iphone and ipad. some images were stretched and some were not showing. But on Android devices, i can say almost fine (Images were showing ) but not perfect. On PC, it is perfect. I also saw a horizontal scroll bar after finishing the project. I mean a some blank space on the right side of page.

I mostly used container and container-fluid. I also used this meta tag-

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

I am not sure what is causing this. Thanks for your help.

I am adding one of the section which image is not showing on iphone and ipad.

#banner {
    height: 100%;
    background: url('/Images/3.jpg')fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

Solution

  • The horizontal scrollbar is your footer form flying in from the right. It should be wrapped in a container with overflow hidden. That will solve it.

    I do not see any stretched images (but I have no iOS to check). Sorry for that.