youngsquid youngsquid - 6 months ago 12
iOS Question

How to center align images in xs view and also rotate to horizontal

What I'm trying to do is take two responsive images and have them rotate to be horizontal, inline and centered when the page is xs. I've managed to get it to work. But when I'm in the largest view the images are inline when I want them to be displayed vertically. As I make the page smaller the images go back to being displayed vertical until I reach the xs point.
Here's the html

<div class="row">
<div class="col-md-11 col-xs-12 col-sm-11">
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="/images/first image.JPG" alt="First slide image" width="596" height="450" class="center-block">
<div class="carousel-caption">
<h3>First slide Heading</h3>
<p>First slide Caption</p>
</div>
</div>
<div class="item"><img src="/images/second image.jpg" alt="Second slide image" width="582" height="450" class="center-block">
<div class="carousel-caption">
<h3>Second slide Heading</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="item"><img src="/images/IMG_1826.JPG" alt="Third slide image" width="588" height="441" class="center-block">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
</div>
<div class="icons col-md-1 col-lg-1 col-sm-1 col-xs-12" id="logobox"><img src="/wood-instagram-icon.png" alt="Placeholder image" class="img-responsive" id="logo"><img src="/facebook-log-wood.png" alt="Placeholder image" class="img-responsive" id="logo"></div>




And here's the css

}
#logo {
max-width: 50px;
max-height: 50px;
display: inline-block;
}
.icons.col-xs-12 #logobox {
display: inline-block;
}
#logobox {
text-align: center;
}

Answer

I have two notes:

  1. id must be unique. Two images may not have the same id.
  2. col-md-1 col-lg-1 col-sm-1 is equal to col-sm-1.

I have simplified your code. Two logo is horizontally and centered, when the width of the screen is 767px and less. And they become vertical and responsive, if the screen width is 768px and up.

Please check the code snippet and tell me what else do you need.

@media screen and (max-width: 767px) {
  .logobox {
    text-align: center;
  }
  .logobox img {
    display: inline-block;
    height: 50px;
    width: 50px;
  }
}

@media screen and (min-width: 768px) {
  .logobox img {
    height: auto;
    width: 100%;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-11">
      <div id="carousel1" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel1" data-slide-to="0" class="active"></li>
          <li data-target="#carousel1" data-slide-to="1"></li>
          <li data-target="#carousel1" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="http://placehold.it/586x450/c69/fff/?text=First%20slide%20image" alt="First slide image" width="596" height="450" class="center-block">
            <div class="carousel-caption">
              <h3>First slide Heading</h3>
              <p>First slide Caption</p>
            </div>
          </div>
          <div class="item">
            <img src="http://placehold.it/582x450/9c6/fff/?text=Second%20slide%20image" alt="Second slide image" width="582" height="450" class="center-block">
            <div class="carousel-caption">
              <h3>Second slide Heading</h3>
              <p>Second slide Caption</p>
            </div>
          </div>
          <div class="item">
            <img src="http://placehold.it/588x441/69c/fff/?text=Third%20slide%20image" alt="Third slide image" width="588" height="441" class="center-block">
            <div class="carousel-caption">
              <h3>Third slide Heading</h3>
              <p>Third slide Caption</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
        <a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
      </div>
    </div>

    <div class="col-xs-12 col-sm-1 logobox"><img src="http://placehold.it/100x100/96c/fff/?text=In" alt="wood-instagram-icon"><img src="http://placehold.it/100x100/6c9/fff/?text=Fb" alt="facebook-log-wood"></div> 
  </div> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Comments