CODEWITHSUNDEEP
htmlcssmobiletwitter-bootstrap-3responsive-design
jtbitt
jtbitt

Reputation: 581

Why are my Bootstrap columns stacking incorrectly on mobile/tablet?

I am currently finishing up my personal portfolio website and I am basically done. The desktop version of my site is working properly, and is fully responsive on all desktop screens (13"-24") that I tested. Every page of my desktop site is split in half, with 2 col-md-6's.

However, this design isn't logical for mobile/tablets, so I'm trying to stack all the col-md-6's from my pages as col-xs-12's, but it is not working correctly. In fact, it looks terrible. From what I'm assuming this is because of the way rows are aligned currently. They are set up for col-md-6's, and not really functioning properly when I put in the 12's. Considering this, how am I supposed to set up rows if they need to be set up differently depending on whether its mobile/tablet or desktop?

One other question is relating to how I should do font-size. I am currently using vm for font sizing, which works great for my desktop version. However, it's gonna come out way too small on mobile. What would the recommended practice be to make up for this issue?

Here's the pictures of each size. (Looking now I see there is one small spacing discrepancy between my 13" and 24", but that's an easy fix. Not concerned about that.)

24"- http://i988.photobucket.com/albums/af6/jtbitt/24-inch-desktop-responsive_zps6mwocx8l.png

13"- http://i988.photobucket.com/albums/af6/jtbitt/13-inch-desktop-responsive_zps4rvtqo5l.png

mobile/tablet- http://i988.photobucket.com/albums/af6/jtbitt/mobile-unresponsive_zpsjn6hu8x3.png

HTML-

<section id="about" ng-controller="aboutController">    
  <div class="container-fluid">

    <div class="row about-row">

      <div class="about-left col-md-6 col-xs-12">
      </div>

      <div class="about-right col-md-6 col-xs-12">
        <div class="row">
          <div class="about-content-title col-md-12">
            <h1><strong>I'M JAY.</strong></h1>
          </div>
        </div>

        <div class="row">
          <div class="about-content-info col-md-12">
            <p ng-if="about.firstParagraph">An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. Anything that is seemingly impossible interests me a lot. I'm ready to get to work.</p>

            <p ng-if="!about.firstParagraph">Currently seeking a Javascript position, using the MEAN stack, in New York City. Being innovative, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team.</p>
          </div>
        </div>

        <div class="row">
          <div class="about-button col-md-12">
            <button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()">MORE =></button>
            <button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio">VIEW SKILLS</a></button>
          </div>
        </div>

        <div class="row">
          <div class="about-personal-info col-md-12">
            <h4>Email: [email protected]</h4>
          </div>
        </div>

        <div class="row">
          <div class="about-icon col-md-12">
            <a href="{{ profile.url }}" ng-repeat="profile in about.profiles"><img ng-src="{{ profile.icon }}" /></a>
          </div>
        </div>

      </div>

    </div>

  </div>
</section>

CSS-

#about {
    height: 100%; 
    width: 100%;
    background: rgba(0,97,65,1);
    background: -moz-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,97,65,1)), color-stop(7%, rgba(54,135,95,1)), color-stop(22%, rgba(36,123,85,1)), color-stop(53%, rgba(0,97,65,1)), color-stop(76%, rgba(34,121,84,1)), color-stop(90%, rgba(54,135,95,1)), color-stop(100%, rgba(54,135,95,1)));
    background: -webkit-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -o-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -ms-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: linear-gradient(to right, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006141', endColorstr='#36875f', GradientType=1 );
    background-repeat: no-repeat;
    color: #101010;
    border-bottom: 3px solid black;
}

 #about .container-fluid, .about-row {
  height: 100%;
  width: 100%;
 }

.about-left {
  height: 100%;
  background-image: url('../../images/jay-ocean.jpg'); 
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100%;
  border-right: 3px solid #101010;
}

.about-right {
  height: 100%;
  width: 50%;
  padding-top: 24vh;
  padding-left: 3.4vw;
  text-align: center;
}

.about-right .row {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.about-content-title {
  padding-bottom: -30px;
}

.about-content-title h1{
  font-size: 3.1vw;
  margin: 3px;
}

.about-content-info p {
  font-size: 1vw;
  word-spacing: 0.3vw;
}

.about-button button {
  color: gray;
  border: 1px solid #101010;
  background-color: #101010;
  font-size: 0.7vw;
}

.about-button a {
  color: gray;
}

.about-personal-info h4 {
  font-size: 1vw;
  word-spacing: 0.3vw;
}

.about-icon img {
  height: 3.5vh;
  width: 1.75vw;
  border-radius: 10px;
  border: 1px solid #101010;
  margin: 3px;
}

Upvotes: 0

Views: 916

Answers (1)

Absalon Casta&#241;on
Absalon Casta&#241;on

Reputation: 369

Actually col-xs-12 is not working because of the .about-right and .about-left width property. You've set it to 50%, just remove it. About the other question I always use pixels and it works fine. This is my solution Css:

 html{height: 100%; }
body{height: 100%; }
#about {
    height: 100%;     
    background: rgba(0,97,65,1);
    background: -moz-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,97,65,1)), color-stop(7%, rgba(54,135,95,1)), color-stop(22%, rgba(36,123,85,1)), color-stop(53%, rgba(0,97,65,1)), color-stop(76%, rgba(34,121,84,1)), color-stop(90%, rgba(54,135,95,1)), color-stop(100%, rgba(54,135,95,1)));
    background: -webkit-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -o-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: -ms-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    background: linear-gradient(to right, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006141', endColorstr='#36875f', GradientType=1 );
    background-repeat: no-repeat;
    color: #101010;
    border-bottom: 3px solid black;
}
.about-left { 
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100%;
  border-right: 3px solid #101010;
}
.about-right { 
  padding-top: 3vh;
  padding-left: 3.4vw;
  text-align: center;
}
.about-content-title {
  padding-bottom: -30px;
}
.about-content-title h1{
  font-size: 40px;
  margin: 3px;
}
.about-content-info p {
  font-size: 12px;
  word-spacing: 0.3vw;
}
.about-button button {
  color: gray;
  border: 1px solid #101010;
  background-color: #101010;
  font-size: 0.7vw;
}
.about-button a {
  color: gray;
}
.about-personal-info h4 {
  font-size: 10px;
  word-spacing: 0.3vw;
}
.about-icon img {
  height: 3.5vh;
  width: 1.75vw;
  border-radius: 10px;
  border: 1px solid #101010;
  margin: 3px;
}

html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>  
    <section id="about" ng-controller="aboutController">    
      <div class="container-fluid">

        <div class="about-left col-md-6 col-xs-12">
        <img src="./Album.gif" class="img-responsive disc col-xs-12" alt="Image">
        </div>
        <div class="about-right col-md-6 col-xs-12  text-justified">  
          <div class="col-md-6 col-md-offset-3">        
              <div class="about-content-title ">
                <h1><strong>I'M JAY.</strong></h1>
              </div> 

              <div class="about-content-info ">
                <p ng-if="about.firstParagraph">An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. Anything that is seemingly impossible interests me a lot. I'm ready to get to work.</p>

                <p ng-if="!about.firstParagraph">Currently seeking a Javascript position, using the MEAN stack, in New York City. Being innovative, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team.</p>
              </div>

              <div class="about-button col-md-12">
                <button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()">MORE =></button>
                <button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio">VIEW SKILLS</a></button>
              </div>

              <div class="about-personal-info col-md-12">
                <h4>Email: [email protected]</h4>
              </div>

              <div class="about-icon col-md-12">
                <a href="{{ profile.url }}" ng-repeat="profile in about.profiles"><img ng-src="{{ profile.icon }}" /></a>
              </div>
            </div>
           </div>
          </div>
      </section>

    <script src="./js/jquery-2.1.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

</body>
</html>

Upvotes: 2

Related Questions