Twitter Bootstrap Question posted in

How to get my website to appear the same even when I resize my browser?-Twitter bootstrap

I’m building a dupe of the Twitter profile page but I noticed that every time I resize my browser all the text and images get jumbled together which makes the page look really messy. How do I get all the text and image to stay in the same place, relative to each other, and shrink proportionally when I resize my browser. I tried using percentages for widths and heights of divs but when I resized the browser the text line broke and some of the text spilled out of the divs and containers. I tried using vh instead of px but the containers became a lot thinner when I made the page smaller and I didn’t like that. Does anyone have any solutions? I am using Bootstrap 4.0 by the way.

This is my html:

<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>StanCafe - Hello!</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="profile.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/3b733e1950.js" crossorigin="anonymous"></script>


  </head>

  <body>

    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
      <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-home"></i> Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-star"></i> Snippets</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-bell"></i> Notifications</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-envelope"></i> Messages</a>
          </li>
        </ul>

        <a class="navbar-brand" href="#"><i class="fas fa-coffee"></i></a>

        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search StanCafe" aria-label="Search" id="search">
        </form>
        <a class="btn btn-primary" href="#" id="publish-button">Publish</a>
      </div>
      </div>
    </nav>

    <header>

      <div id="cover-photo-wrapper">
        <img src="background-image-cropped.png" alt="background-image">
      </div>

      <div id="profile-photo-wrapper">

        <div class="container">
          <div class="row">

            <div class="col-4">
              <img src="profile-picture-cropped.png" id="profile-photo" alt="profile-picture">
            </div>

            <div class="col-6">
              <a href="#" class="profile-stats">Posts<span>320</span></a>
              <a href="#" class="profile-stats">Following<span>600</span></a>
              <a href="#" class="profile-stats">Followers<span>900</span></a>
              <a href="#" class="profile-stats">Cafes<span>8</span></a>
            </div>

            <div class="col-2">
             <button type="button" class="btn btn-outline-primary" id="follow-button">Follow</button>
            </div>

          </div>
        </div>

      </div>

    </header>

    <div class="container">
      <div class="row">

        <div class="col-4" id="profile">
          <hgroup>
            <a href="#"><h1>Alya Tsarina</h1></a>
            <a href="#"><h2>@allina</h2></a>
          </hgroup>
          <p>Jennie stan but go off lol</p>
          <span id="location"><i class="fa fa-map-marker"></i> Moscow, Russia</span>
          <span id="website"><i class="fa fa-link"></i> <a href="#">allina.com</a></span>
          <span id="birthday"><i class="fas fa-birthday-cake"></i> Jan. 2020</span>
          <a class="btn btn-primary" href="#" id="message-button">Message</a>
          <a class="btn btn-primary" href="#" id="message-button">Edit Room</a>
          <span><i class="fas fa-coffee"></i> <a href="#">Cafes you follow</a><span>
          <div id="cafe-profile-photos">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <br />
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
          </div>


        </div>

        <div class="col-8" id="posts">
          <nav class="nav">
            <a class="nav-link active" href="#">Posts</a>
            <a class="nav-link" href="#">Room Gallery</a>
            <a class="nav-link" href="#">Hearted</a>
          </nav>
          <article class="container">
            <div class="row no-gutters">

              <div class="col-1">
                <img src="profile-picture-cropped.png" alt="profile-picture" class="profile-thumbnail">
              </div>

              <div class="col-11 post-body">
                <a href="#" class="post-username"><span class="username-name">Alya Tsarina</span> <span class="username-handle">@allina</span></a>
                <p>Ya'll BlackPink's album is gonna pop off so baaaad! The queens of kpop are rly coming.</p>
                <nav>
                  <a href="#" class="comments"><i class="fa fa-comment-o"></i> 217</a>
                  <a href="#" class="repost"><i class="fa fa-retweet"></i> 38</a>
                  <a href="#" class="heart"><i class="fa fa-heart-o"></i> 1, 278</a>
                </nav>
              </div>

            </div>
          </article>

        </div>


      </div>
    </div>

  </body>

</html>

This is my CSS:

a, a:hover {
  color: rgb(29,161,242);
}

body {
  background-color: #E6ECF0;
}

.navbar {
  background-color: white;
  border-bottom: 1px solid #999;
}

.navbar-brand {
  margin-left: 50%;
  margin: 0px auto;
}

.navbar-brand i {
  color:rgb(29,161,242);
}

#search {
  background-color: #F5F8FA;
  border-radius: 20px;
  border: 1px solid #E6ECF0;
}

#search:focus {
  background-color: white;
  border: 2px solid rgb(29,161,242);
}

#publish-button {
  background-color: rgb(29,161,242);
  color: white;
  border-radius: 20px;
  border: none;
}

#publish-button:hover {
  background-color: #329CC3
}

#cover-photo-wrapper {
  height: 40vh;
  overflow: hidden;
}

#cover-photo-wrapper img {
  width: 100%;
}

#profile-photo-wrapper {
  background-color: white;
  border-bottom: 2px solid #CCC;
  height: 60px;
  position: relative;
}

#profile-photo {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 5px solid white;
  position: absolute;
  top: -110px;
}

.profile-stats {
  float: left;
  text-align: center;
  width: 80px;
  margin-top: 10px;
  margin-left: 4px;
  margin-right: 4px;
  text-decoration: none;
  color:#666;
  font-size: 0.8em;
}

.profile-stats:hover {
  text-decoration: none;
  border-bottom: 2px solid rgb(29,161,242)
}

.profile-stats:hover span {
  color: rgb(29,161,242);
}

 .profile-stats span {
  display: block;
  margin: 0px auto;
  font-size: 1.4em;
  color: #444;
  position: relative;
  top: -4px;
}

#follow-button {
  border-color: rgb(29,161,242);
  color: rgb(29,161,242);
  border-radius: 20px;
  margin-top: 10px;
  width: 100px;
  font-weight: bold;
  font-size: 0.8em;
}

#follow-button:hover {
  background-color: #329CC3;
  color: white;
}

#profile {
  margin-top: 35px;
}

#profile h1 {
  color: black;
  font-size: 1.2em;
  font-weight: bold;
}

#profile h2 {
  font-size: 1em;
  color: #333;
  font-weight: normal;
  position: relative;
  top: -6px;
}

#profile p {
  margin-top: 6px;
  font-size: 0.9em;
}

#profile span {
  display: block;
  color: #333;
  font-size: 0.9em;
  margin-bottom: 4px;
}

#profile span .fa {
  width: 15px;
}

#message-button {
  background-color: rgb(29,161,242);
  color: white;
  border-radius: 20px;
  border: none;
  margin-top: 12px;
  width: 100%;
  margin-bottom: 12px;
}

#message-button:hover {
  background-color: #329CC3
}

#cafe-profile-photos img {
  border-radius: 25px;
  margin-bottom: 4px;
}

#posts > nav {
  margin-top: 10px;
  background-color: white;
  padding: 10px 0px;
  border-bottom: 1px solid #E6ECF0;
}

#posts > nav a {
  font-size: 1.2em;
  font-weight: bold;
}

#posts > nav a.active {
  color: #222;
}

#posts > nav a:hover {
  text-decoration: underline;
}

#posts article {
  background-color: #FFF;
  border-bottom: 1px solid #E6ECF0;
  padding: 15px;
}

#posts article:hover {
  background-color: #F5F8FA;
}

#posts .profile-thumbnail {
  height: 50px;
  width: 50px;
  border-radius: 25px;
}

#posts .post-body {
  padding-left: 10px;
  font-size: 0.9em;
}

#posts .post-username .username-name {
  color: #333;
  font-weight: bold;
}

#posts .post-username:hover {
  text-decoration: none;
}

#posts .post-username:hover .username-name {
  text-decoration: underline;
  color: rgb(29,161,242);
}

#posts .post-username .username-handle {
  color: #333;
  font-weight: normal;
}

#posts .post-body nav a {
  color: #657786;
  padding: 0px 6px;
}

#posts .post-body nav a .fa {
  margin-right: 5px;
}

#posts .post-body nav a:hover {
  text-decoration: none;
  color: rgb(29,161,242);
}

Fullscreen website
Resized website

Tags:

2

Answers


  1. 0

    Bootstrap4 came with many classes for viewport specific styling. You should also learn more about media query, which will help you to give styles to specific device width.

    Login or Signup to reply.
  2. 0

    note :I havent gone through entire code thoroughlly
    inorder to make it responsive try giving values in %.also try to use media query
    eg:

    @media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

    or

    /* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
  width: 100%;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search