I have a site developed with Bootstrap that has a% car% car.
I want the iPhone, the caption <div class="carousel-inner"> to decrease, so that the image appears more.
On the other devices it works fine, only on the iPhone that caption gets all over the image.
How to solve?
I think you're talking about Media Queries ,
I think this question has to do with the size of the screen, test using another browser on the iphone, to see if it continues the same thing;
Unfortunately I do not know the exact dimensions of the iPhone, it's up to you to search (depends on the version); But with media queries, you can configure css.
It needs a bit of treatment, but I think it would be something like this:
/*Muito pequeno(<768px)*/
@media only screen and (min-width:768px){
.carousel-caption {position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
font-size: 20px;
}
/*Pequeno (≥768px)*/
@media only screen and (max-width:768px){
.carousel-caption {position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
font-size: 40px;
}
/*Médio (≥992px)*/
@media only screen and (max-width:992px){
.carousel-caption {position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
font-size: 60px;
}
/*Grande (≥1200px)*/
@media only screen and (max-width:1200px){
.carousel-caption {position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
font-size: 80px;
}
}