Twitter Bootstrap Question posted in

Issues with grid when resized to mobile – Twitter bootstrap

I have the following issue: When I resize the window the grid gets pushed to the left instead of staying centered. Does anyone know why the grid gets pushed to the left instead of staying centered when it’s in mobile view? I would like to keep it centered and am not too sure how to fix this.

/*
  Simple Grid
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - http://dallasbass.com
*/

[class*='grid'],
[class*='col-'],
[class*='mobile-'],
.grid:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*='col-'] {
  float: left;
  min-height: 1px;
  padding-right: 20px;
  /* column-space */
}
[class*='col-'] [class*='col-']:last-child {
  padding-right: 0;
}
.grid {
  width: 100%;
  max-width: 1140px;
  min-width: 748px;
  /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
  margin: 0 auto;
  overflow: hidden;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid-pad {
  padding-top: 10px;
  padding-left: 20px;
  /* grid-space to left */
  padding-right: 0;
  /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}
.push-right {
  float: right;
}
/* Content Columns */

.col-1-1 {
  width: 100%;
}
.col-2-3,
.col-8-12 {
  width: 66.66%;
}
.col-1-2,
.col-6-12 {
  width: 50%;
}
.col-1-3,
.col-4-12 {
  width: 33.33%;
}
.col-1-4,
.col-3-12 {
  width: 25%;
}
.col-1-5 {
  width: 20%;
}
.col-1-6,
.col-2-12 {
  width: 16.667%;
}
.col-1-7 {
  width: 14.28%;
}
.col-1-8 {
  width: 12.5%;
}
.col-1-9 {
  width: 11.1%;
}
.col-1-10 {
  width: 10%;
}
.col-1-11 {
  width: 9.09%;
}
.col-1-12 {
  width: 8.33%
}
/* Layout Columns */

.col-11-12 {
  width: 91.66%
}
.col-10-12 {
  width: 83.333%;
}
.col-9-12 {
  width: 75%;
}
.col-5-12 {
  width: 41.66%;
}
.col-7-12 {
  width: 58.33%
}
/* Pushing blocks */

.push-2-3,
.push-8-12 {
  margin-left: 66.66%;
}
.push-1-2,
.push-6-12 {
  margin-left: 50%;
}
.push-1-3,
.push-4-12 {
  margin-left: 33.33%;
}
.push-1-4,
.push-3-12 {
  margin-left: 25%;
}
.push-1-5 {
  margin-left: 20%;
}
.push-1-6,
.push-2-12 {
  margin-left: 16.667%;
}
.push-1-7 {
  margin-left: 14.28%;
}
.push-1-8 {
  margin-left: 12.5%;
}
.push-1-9 {
  margin-left: 11.1%;
}
.push-1-10 {
  margin-left: 10%;
}
.push-1-11 {
  margin-left: 9.09%;
}
.push-1-12 {
  margin-left: 8.33%
}
@media handheld,
only screen and (max-width: 767px) {
  .grid {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px;
    /* grid-space to left */
    padding-right: 10px;
    /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
  }
  [class*='col-'] {
    width: auto;
    float: none;
    margin: 10px 0;
    padding-left: 0;
    padding-right: 10px;
    /* column-space */
  }
  [class*='col-'] [class*='col-'] {
    padding-right: 0;
  }
  /* Mobile Layout */
  [class*='mobile-col-'] {
    float: left;
    margin: 0 0 10px;
    padding-left: 0;
    padding-right: 10px;
    /* column-space */
    padding-bottom: 0;
  }
  .mobile-col-1-1 {
    width: 100%;
  }
  .mobile-col-2-3,
  .mobile-col-8-12 {
    width: 66.66%;
  }
  .mobile-col-1-2,
  .mobile-col-6-12 {
    width: 50%;
  }
  .mobile-col-1-3,
  .mobile-col-4-12 {
    width: 73.33%;
  }
  .mobile-col-1-4,
  .mobile-col-3-12 {
    width: 25%;
  }
  .mobile-col-1-5 {
    width: 20%;
  }
  .mobile-col-1-6,
  .mobile-col-2-12 {
    width: 16.667%;
  }
  .mobile-col-1-7 {
    width: 14.28%;
  }
  .mobile-col-1-8 {
    width: 12.5%;
  }
  .mobile-col-1-9 {
    width: 11.1%;
  }
  .mobile-col-1-10 {
    width: 10%;
  }
  .mobile-col-1-11 {
    width: 9.09%;
  }
  .mobile-col-1-12 {
    width: 8.33%
  }
  /* Layout Columns */
  .mobile-col-11-12 {
    width: 91.66%
  }
  .mobile-col-10-12 {
    width: 83.333%;
  }
  .mobile-col-9-12 {
    width: 75%;
  }
  .mobile-col-5-12 {
    width: 41.66%;
  }
  .mobile-col-7-12 {
    width: 58.33%
  }
  .hide-on-mobile {
    display: none !important;
    width: 0;
    height: 0;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body style="padding-top: 70px; ">
  <header>
    <nav class="navbar navbar-default navbar-fixed-top " role="navigation ">
      <div class="container-fluid ">
        <div class="navbar-header ">
          <button type="button " class="navbar-toggle collapsed " data-toggle="collapse " data-target="#navbar ">
            <span class="sr-only ">Toggle navigation</span>
            <span class="icon-bar "></span>
            <span class="icon-bar "></span>
            <span class="icon-bar "></span>
          </button>
          <a class="navbar-brand " href="http:// ">
            <img onload="this.style.opacity='1!important' ; " class="logo " src="img/logo.png ">
          </a>
        </div>
        <div id="navbar " class="navbar-collapse collapse ">
          <ul class="nav navbar-nav ">
            <li class="navbar-left "><a href="travel.html ">TRAVEL</a>
            </li>
            <li class="navbar-left "><a href="portfolio.html "> PORTFOLIO </a>
            </li>
            <li class="navbar-left "><a href="about.html "> ABOUT </a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right ">
            <li class="right "> <a href="https://www.instagram.com/ "><i class="fa fa-instagram "></i></a>
              <li class="right "> <a href="https://www.pinterest.com/ "><i class="fa fa-pinterest "></i></a>
                <li class="right "> <a href="https://www.facebook.com/ "><i class="fa fa-facebook "></i></a>
                  <li class="right "> <a href="https://twitter.com/ "><i class="fa fa-twitter "></i></a>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
      <!--/.container-fluid -->
    </nav>
    </div>
  </header>
  <!---End Header-->
  <style>
    .content {
      background: #ffffff;
      padding: 30px;
      font-family: 'Nunito Sans', sans-serif;
      color: #4a4a4a;
      font-size: 15px;
    }
  </style>
  <div class="grid grid-pad ">
    <div class="col-1-1 ">
      <img onload="this.style.opacity='1' ; " src="img/me.png " class="img-responsive center-block " alt="Reponsive image ">
      </a>
    </div>
  </div>
  </div>
  <!-- Grid 1/3 -->
  <div class="grid grid-pad ">
    <div class="col-1-3 mobile-col-1-3 push-1-3 ">
      <div class="content ">
        <p style="color: #FC9F9F; font-size:20px ">+Creative.
          <br>+Design minded.
          <br>+Experience Driven.
          <br>
        </p>
        <p>I am passionate about creating engaging, pixel perfect user experiences.
        </p>
        <br>
        <p style="font-family: 'Cedarville Cursive', sans-serif; font-size:22px ">JH</p>
        Contact: <a href="mailto: " style="text-decoration:none !important; text-decoration:none; color: #4a4a4a; "> [email protected]</a>

      </div>
    </div>
    <div class="col-1-3 mobile-col-1-3 push-1-3 ">
      <div class="content ">
      </div>
    </div>
  </div>

  <!-- End page content -->
  <footer class="footer ">
    <div class="container ">
      <span>Copyright &copy; 2017. JH. All rights reserved.</span>
    </div>
  </footer>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Tags:

2

Answers


  1. 0

    You have a number of HTML tags unclosed in your code.. particularly li in your navbar, and a number of unneeded closing tags, please look at validating your HTML.

    In the meantime, the grid system you’re using (over the top of the bootstrap grid system i might add), overrides its .push-* classes at mobile, by explicitly setting all left and right margins on .mobile-col-* to 0. It also adds a float:left property.

    You can look at adding a class like .mobile-col-centered where you override the overrides using something like the following to the bottom of the @media handheld, only screen and (max-width: 767px) declaration:

    .mobile-col-centered {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

    JSFIDDLE

    Note: due to this overriding the float property, this may cause problems for the display of any columns that you intentionally want to sit next to one another

    Alternatively, you could take advantage of the bootstrap grid system you have already included and use the .col-xs-* and .col-xs-offset-* options to “center” your columns at mobile widths. Personally, I currently cannot see any benefit to the grid system you’re trying to use here.

    Login or Signup to reply.
  2. 0

    Your content isn’t really being pushed to the left, the column is collapsing once it reaches 767px (as it’s designed to). If you want to keep the columns width smaller for longer you can apply a max-width rule inside a media query.

    You also have a lot of errors in your HTML, validate it.

    Example that shows the column collapsing:

    @import url("https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Cedarville+Cursive");

/*
  Simple Grid
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - http://dallasbass.com
*/

[class*='grid'],
[class*='col-'],
[class*='mobile-'],
.grid:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*='col-'] {
  float: left;
  min-height: 1px;
  padding-right: 20px;
  /* column-space */
}
[class*='col-'] [class*='col-']:last-child {
  padding-right: 0;
}
.grid {
  width: 100%;
  max-width: 1140px;
  min-width: 748px;
  /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
  margin: 0 auto;
  overflow: hidden;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid-pad {
  padding-top: 20px;
  padding-left: 20px;
  /* grid-space to left */
  padding-right: 0;
  /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}
.push-right {
  float: right;
}
/* Content Columns */

.col-1-1 {
  width: 100%;
}
.col-2-3,
.col-8-12 {
  width: 66.66%;
}
.col-1-2,
.col-6-12 {
  width: 50%;
}
.col-1-3,
.col-4-12 {
  width: 33.33%;
}
.col-1-4,
.col-3-12 {
  width: 25%;
}
.col-1-5 {
  width: 20%;
}
.col-1-6,
.col-2-12 {
  width: 16.667%;
}
.col-1-7 {
  width: 14.28%;
}
.col-1-8 {
  width: 12.5%;
}
.col-1-9 {
  width: 11.1%;
}
.col-1-10 {
  width: 10%;
}
.col-1-11 {
  width: 9.09%;
}
.col-1-12 {
  width: 8.33%
}
/* Layout Columns */

.col-11-12 {
  width: 91.66%
}
.col-10-12 {
  width: 83.333%;
}
.col-9-12 {
  width: 75%;
}
.col-5-12 {
  width: 41.66%;
}
.col-7-12 {
  width: 58.33%
}
/* Pushing blocks */

.push-2-3,
.push-8-12 {
  margin-left: 66.66%;
}
.push-1-2,
.push-6-12 {
  margin-left: 50%;
}
.push-1-3,
.push-4-12 {
  margin-left: 33.33%;
}
.push-1-4,
.push-3-12 {
  margin-left: 25%;
}
.push-1-5 {
  margin-left: 20%;
}
.push-1-6,
.push-2-12 {
  margin-left: 16.667%;
}
.push-1-7 {
  margin-left: 14.28%;
}
.push-1-8 {
  margin-left: 12.5%;
}
.push-1-9 {
  margin-left: 11.1%;
}
.push-1-10 {
  margin-left: 10%;
}
.push-1-11 {
  margin-left: 9.09%;
}
.push-1-12 {
  margin-left: 8.33%
}
@media handheld,
only screen and (max-width: 767px) {
  .grid {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px;
    /* grid-space to left */
    padding-right: 10px;
    /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
  }
  [class*='col-'] {
    width: auto;
    float: none;
    margin: 10px 0;
    padding-left: 0;
    padding-right: 10px;
    /* column-space */
  }
  [class*='col-'] [class*='col-'] {
    padding-right: 0;
  }
  /* Mobile Layout */
  [class*='mobile-col-'] {
    float: left;
    margin: 0 0 10px;
    padding-left: 0;
    padding-right: 10px;
    /* column-space */
    padding-bottom: 0;
  }
  .mobile-col-1-1 {
    width: 100%;
  }
  .mobile-col-2-3,
  .mobile-col-8-12 {
    width: 66.66%;
  }
  .mobile-col-1-2,
  .mobile-col-6-12 {
    width: 50%;
  }
  .mobile-col-1-3,
  .mobile-col-4-12 {
    width: 33.33%;
  }
  .mobile-col-1-4,
  .mobile-col-3-12 {
    width: 25%;
  }
  .mobile-col-1-5 {
    width: 20%;
  }
  .mobile-col-1-6,
  .mobile-col-2-12 {
    width: 16.667%;
  }
  .mobile-col-1-7 {
    width: 14.28%;
  }
  .mobile-col-1-8 {
    width: 12.5%;
  }
  .mobile-col-1-9 {
    width: 11.1%;
  }
  .mobile-col-1-10 {
    width: 10%;
  }
  .mobile-col-1-11 {
    width: 9.09%;
  }
  .mobile-col-1-12 {
    width: 8.33%
  }
  /* Layout Columns */
  .mobile-col-11-12 {
    width: 91.66%
  }
  .mobile-col-10-12 {
    width: 83.333%;
  }
  .mobile-col-9-12 {
    width: 75%;
  }
  .mobile-col-5-12 {
    width: 41.66%;
  }
  .mobile-col-7-12 {
    width: 58.33%
  }
  .hide-on-mobile {
    display: none !important;
    width: 0;
    height: 0;
  }
}
body {
  padding-top: 50px;
}
.content a {
  text-decoration: none;
  color: #4a4a4a;
}
.content a:hover {
  text-decoration: none;
  color: #FC9F9F;
}
.content {
  background-color: #fafafa;
  padding: 30px;
  font-family: 'Nunito Sans', sans-serif;
  color: #4a4a4a;
  font-size: 15px;
}
.skills {
  color: #FC9F9F;
  font-size: 20px;
  margin-bottom: 5px;
}
.sig {
  font-family: 'Cedarville Cursive', sans-serif;
  font-size: 22px;
  margin: 10px 0;
}
.footer {
  color: #4a4a4a;
  background-color: #fafafa;
  padding: 30px;
}
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <header>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="#">
            <img onload="this.style.opacity='1!important';" class="logo" src="http://placehold.it/20x20/FC9F9F/FC9F9F">
          </a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="navbar-left"><a href="travel.html">TRAVEL</a>
            </li>
            <li class="navbar-left"><a href="portfolio.html"> PORTFOLIO </a>
            </li>
            <li class="navbar-left"><a href="about.html"> ABOUT </a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="right"> <a href="https://www.instagram.com/pixelsbyjen"><i class="fa fa-instagram"></i></a>
            </li>
            <li class="right"> <a href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a>
            </li>
            <li class="right"> <a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
            </li>
            <li class="right"> <a href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
            </li>
          </ul>
        </div>

      </div>
    </nav>
  </header>

  <div class="grid grid-pad">
    <div class="col-1-1">
      <img onload="this.style.opacity='1';" src="http://placehold.it/1920x750/FC9F9F/000" class="img-responsive center-block" alt="Reponsive image">
    </div>
  </div>

  <div class="grid grid-pad">
    <div class="col-1-2 push-1-4">
      <div class="content">

        <div class="skills">+Creative.</div>
        <div class="skills">+Design minded.</div>
        <div class="skills">+Experience Driven.</div>

        <p>I am passionate about creating engaging, pixel perfect user experiences.</p>

        <div class="sig">JH</div>

        <span>Contact: <a href="mailto:"> [email protected]</a></span>

      </div>
    </div>

    <div class="col-1-2 push-1-4">
      <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>

  </div>

  <div class="grid grid-pad">
    <div class="col-1-1">

      <footer class="footer">
        <span>Copyright &copy; 2017. JH. All rights reserved.</span>
      </footer>

    </div>
  </div>

</body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    Max-width Example:

    @import url("https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Cedarville+Cursive");

/*
  Simple Grid
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - http://dallasbass.com
*/

[class*='grid'],
[class*='col-'],
[class*='mobile-'],
.grid:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*='col-'] {
  float: left;
  min-height: 1px;
  padding-right: 20px;
  /* column-space */
}
[class*='col-'] [class*='col-']:last-child {
  padding-right: 0;
}
.grid {
  width: 100%;
  max-width: 1140px;
  min-width: 748px;
  /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
  margin: 0 auto;
  overflow: hidden;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid-pad {
  padding-top: 20px;
  padding-left: 20px;
  /* grid-space to left */
  padding-right: 0;
  /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}
.push-right {
  float: right;
}
/* Content Columns */

.col-1-1 {
  width: 100%;
}
.col-2-3,
.col-8-12 {
  width: 66.66%;
}
.col-1-2,
.col-6-12 {
  width: 50%;
}
.col-1-3,
.col-4-12 {
  width: 33.33%;
}
.col-1-4,
.col-3-12 {
  width: 25%;
}
.col-1-5 {
  width: 20%;
}
.col-1-6,
.col-2-12 {
  width: 16.667%;
}
.col-1-7 {
  width: 14.28%;
}
.col-1-8 {
  width: 12.5%;
}
.col-1-9 {
  width: 11.1%;
}
.col-1-10 {
  width: 10%;
}
.col-1-11 {
  width: 9.09%;
}
.col-1-12 {
  width: 8.33%
}
/* Layout Columns */

.col-11-12 {
  width: 91.66%
}
.col-10-12 {
  width: 83.333%;
}
.col-9-12 {
  width: 75%;
}
.col-5-12 {
  width: 41.66%;
}
.col-7-12 {
  width: 58.33%
}
/* Pushing blocks */

.push-2-3,
.push-8-12 {
  margin-left: 66.66%;
}
.push-1-2,
.push-6-12 {
  margin-left: 50%;
}
.push-1-3,
.push-4-12 {
  margin-left: 33.33%;
}
.push-1-4,
.push-3-12 {
  margin-left: 25%;
}
.push-1-5 {
  margin-left: 20%;
}
.push-1-6,
.push-2-12 {
  margin-left: 16.667%;
}
.push-1-7 {
  margin-left: 14.28%;
}
.push-1-8 {
  margin-left: 12.5%;
}
.push-1-9 {
  margin-left: 11.1%;
}
.push-1-10 {
  margin-left: 10%;
}
.push-1-11 {
  margin-left: 9.09%;
}
.push-1-12 {
  margin-left: 8.33%
}
@media handheld,
only screen and (max-width: 767px) {
  .grid {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px;
    /* grid-space to left */
    padding-right: 10px;
    /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
  }
  [class*='col-'] {
    width: auto;
    float: none;
    margin: 10px 0;
    padding-left: 0;
    padding-right: 10px;
    /* column-space */
  }
  [class*='col-'] [class*='col-'] {
    padding-right: 0;
  }
  /* Mobile Layout */
  [class*='mobile-col-'] {
    float: left;
    margin: 0 0 10px;
    padding-left: 0;
    padding-right: 10px;
    /* column-space */
    padding-bottom: 0;
  }
  .mobile-col-1-1 {
    width: 100%;
  }
  .mobile-col-2-3,
  .mobile-col-8-12 {
    width: 66.66%;
  }
  .mobile-col-1-2,
  .mobile-col-6-12 {
    width: 50%;
  }
  .mobile-col-1-3,
  .mobile-col-4-12 {
    width: 33.33%;
  }
  .mobile-col-1-4,
  .mobile-col-3-12 {
    width: 25%;
  }
  .mobile-col-1-5 {
    width: 20%;
  }
  .mobile-col-1-6,
  .mobile-col-2-12 {
    width: 16.667%;
  }
  .mobile-col-1-7 {
    width: 14.28%;
  }
  .mobile-col-1-8 {
    width: 12.5%;
  }
  .mobile-col-1-9 {
    width: 11.1%;
  }
  .mobile-col-1-10 {
    width: 10%;
  }
  .mobile-col-1-11 {
    width: 9.09%;
  }
  .mobile-col-1-12 {
    width: 8.33%
  }
  /* Layout Columns */
  .mobile-col-11-12 {
    width: 91.66%
  }
  .mobile-col-10-12 {
    width: 83.333%;
  }
  .mobile-col-9-12 {
    width: 75%;
  }
  .mobile-col-5-12 {
    width: 41.66%;
  }
  .mobile-col-7-12 {
    width: 58.33%
  }
  .hide-on-mobile {
    display: none !important;
    width: 0;
    height: 0;
  }
}
body {
  padding-top: 50px;
}
.content a {
  text-decoration: none;
  color: #4a4a4a;
}
.content a:hover {
  text-decoration: none;
  color: #FC9F9F;
}
.content {
  background-color: #fafafa;
  padding: 30px;
  font-family: 'Nunito Sans', sans-serif;
  color: #4a4a4a;
  font-size: 15px;
}
.skills {
  color: #FC9F9F;
  font-size: 20px;
  margin-bottom: 5px;
}
.sig {
  font-family: 'Cedarville Cursive', sans-serif;
  font-size: 22px;
  margin: 10px 0;
}
.footer {
  color: #4a4a4a;
  background-color: #fafafa;
  padding: 30px;
}
@media only screen and (max-width: 767px) {
  .content {
    max-width: 400px;
    margin: auto;
  }
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <header>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="#">
            <img onload="this.style.opacity='1!important';" class="logo" src="http://placehold.it/20x20/FC9F9F/FC9F9F">
          </a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="navbar-left"><a href="travel.html">TRAVEL</a>
            </li>
            <li class="navbar-left"><a href="portfolio.html"> PORTFOLIO </a>
            </li>
            <li class="navbar-left"><a href="about.html"> ABOUT </a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="right"> <a href="https://www.instagram.com/pixelsbyjen"><i class="fa fa-instagram"></i></a>
            </li>
            <li class="right"> <a href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a>
            </li>
            <li class="right"> <a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
            </li>
            <li class="right"> <a href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
            </li>
          </ul>
        </div>

      </div>
    </nav>
  </header>

  <div class="grid grid-pad">
    <div class="col-1-1">
      <img onload="this.style.opacity='1';" src="http://placehold.it/1920x750/FC9F9F/000" class="img-responsive center-block" alt="Reponsive image">
    </div>
  </div>

  <div class="grid grid-pad">
    <div class="col-1-2 push-1-4">
      <div class="content">

        <div class="skills">+Creative.</div>
        <div class="skills">+Design minded.</div>
        <div class="skills">+Experience Driven.</div>

        <p>I am passionate about creating engaging, pixel perfect user experiences.</p>

        <div class="sig">JH</div>

        <span>Contact: <a href="mailto:"> [email protected]</a></span>

      </div>
    </div>

    <div class="col-1-2 push-1-4">
      <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>

  </div>

  <div class="grid grid-pad">
    <div class="col-1-1">

      <footer class="footer">
        <span>Copyright &copy; 2017. JH. All rights reserved.</span>
      </footer>

    </div>
  </div>

</body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search