Change Carousel caption on iphone

Asked

Viewed 81 times

0

I have a website developed with Bootstrap that has a Carrousel <div class="carousel-inner">.

I want on the iPhone, the caption <div class="carousel-caption"> decrease so that the image appears more. On other devices works well, only on iPhone that the caption is totally on top of the image.

How to solve?

html5 twitter-bootstrap css3 carousel

  • Has a link to the site or html from the page of the Carousel with the respective css?

1 answer

0

I believe you’re talking about Media Queries,

I think this question has to do with the size of the screen, do a test using another browser on the iphone, to see if it remains the same thing;

Unfortunately I do not know in head the exact dimensions of the iPhone, it is up to you to search (depends on the version); But with media queries, you can configure the css.

It needs a little 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;
}
}

Browser other questions tagged html5 twitter-bootstrap css3 carousel

You are not signed in. Login or sign up in order to post.