0

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;
}
Niloy
  • 576
  • 4
  • 13

2 Answers2

1

I solved the issue of white space by adding overflow-x: hidden to the body

Niloy
  • 576
  • 4
  • 13
0

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.

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • i resolve the issue with ios by this-- https://stackoverflow.com/questions/36686654/fixed-background-images-disappear-on-iphone-ipad – Niloy Aug 09 '17 at 22:39
  • i already added the footer in a container fluid but i added the overflow: hidden as you said @joostS but it did not resolve the issue of white space on the right – Niloy Aug 09 '17 at 22:42