Y
Y
Yura01032019-08-27 15:10:05
iOS
Yura0103, 2019-08-27 15:10:05

How to set up the correct display of the site on the iPhone?

I am learning to make websites. On Android phones, everything works and displays perfectly. But on the IPHON, an empty area the size of a smartphone screen is added on the right side. And for some reason, the pictures in the slider increase several times (almost to pixels)
Here are the styles of the slider and html bootstrap carousel

<div class="row header">
      <div id="carouselExampleIndicators" class="carousel slide col-xl-12" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active sl-1">						
        			</div>						
          <div class="carousel-item sl-2">
          </div>
          <div class="carousel-item sl-3">
          	</div>					
        </div>
      </div>		
    </div>

.carousel-inner {
  height: 100vh;
  width: 100%;
}
.carousel-item{
  height: 100%;
 	width: 100%;
 	display:table;
}
.slide{
  padding: 0px;
  margin: 0px;
}
.sl-1{
  background: url("/images/service/SLIDE-1.jpg") no-repeat  center fixed;
    background-size: cover;
  padding: 0px;
  margin: 0px;
}
.sl-2{
  background: url("/images/service/SLIDE-3.jpg") no-repeat  center fixed;
    background-size: cover;
  padding: 0px;
  margin: 0px;
}
.sl-3{
  background: url("/images/service/SLIDE-4.jpg") no-repeat  center fixed;
    background-size: cover;
  padding: 0px;
  margin: 0px;
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alex-1917, 2019-08-28
@alex-1917

Googled for the author:
https://stackoverflow.com/questions/24154666/backg...
or you don't even have to go far:
How to fix the problem with displaying the landing background on ios?
In short, do less garbage, no one looks at your stupid sliders on iPhones that carry 1.5% of useful information ... Turn off parallax, marallax and sliders for mobile phones and you will have conversion and profit and happiness.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question