CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmobileresponsive
NiceDevelopmentq
NiceDevelopmentq

Reputation: 525

Bootstrap - Content Small on Phone

I am making a website for a project. I am having some issues making it "compatible" with any kind of phone, in the sense that everything that is on the website is extremely small, and some of the things have to be zoomed in on to read what it says.

This is my current code:

    body, html {
      overflow-x: hidden;
      font-family: 'Montserrat', sans-serif;
    }
    #author__image {
      width: 125px;
      height: 125px;
    border-radius: 50%;
      border: 5px solid white;
      margin-bottom: 10px;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: .5s;
    }
    #profile__name {
      font-family: 'Montserrat', sans-serif;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: .8s;
    }
    #profile__asset {
      color: #CCCCCC;
      text-align: center;
      font-family: 'Hind', sans-serif;
      font-size: 18px;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: 1.1s;
    }
    .header img {
      margin-top: 35vh;
    }
    
    .profile__links {
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: 1.4s;
    }
    button {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 18px;
      margin: 15px 5px 5px 5px;
      background: white;
      border: none;
      cursor: pointer;
    }
    
    #twitter {
      color: #55acee;
      background: white;
      border: white 2px solid;
    }
    
    #linkedin {
      color: #007cb7;
      background: white;
      border: white 2px solid;
    }
    #github {
      color: #333333;
      background: white;
      border: white 2px solid;
    }
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Hind:300" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Test Website</title>

<div class="fluid-container">
    <div class="row">
        <section class="module parallax parallax-1">
            <div class="container header">
                <div class="col-12 text-center">
                    <img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg">
                </div>
                <div class="col-12">
                    <h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1>
                </div>
                <div class="col-12">
                    <p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p>
                </div>
                <div class="col-12 text-center animated fadeIn profile__links">
                    <button id="twitter">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                    </button>
                    <button id="linkedin">
                        <i class="fa fa-linkedin" aria-hidden="true"></i>
                    </button>
                    <button id="github">
                        <i class="fa fa-github" aria-hidden="true"></i>
                    </button>
                    <button id="email">
                        <i class="fa fa-envelope-o" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </section>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.js"></script>

Upvotes: 0

Views: 509

Answers (4)

scoopzilla
scoopzilla

Reputation: 883

You also need to wrap cols inside the row class. Take a look at this edited code:

<div class="container-fluid">
<div class="row">
    <section class="module parallax parallax-1">
        <div class="container header">
           <div class="row">
            <div class="col-md-12 text-center">
                <img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg">
            </div>
            <div class="col-md-12">
                <h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1>
            </div>
            <div class="col-md-12">
                <p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p>
            </div>
            <div class="col-md-12 text-center animated fadeIn profile__links">
                <button id="twitter">
                    <i class="fa fa-twitter" aria-hidden="true"></i>
                </button>
                <button id="linkedin">
                    <i class="fa fa-linkedin" aria-hidden="true"></i>
                </button>
                <button id="github">
                    <i class="fa fa-github" aria-hidden="true"></i>
                </button>
                <button id="email">
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                </button>
            </div>
        </div>
       </div>
    </section>
</div>

Upvotes: 0

Tadej Bogataj
Tadej Bogataj

Reputation: 409

You should correct the class:fluid-container with container-fluid That is at least the first error

Upvotes: 0

Vinit Sarvade
Vinit Sarvade

Reputation: 750

You need to add a meta tag in the head tag of your HTML.

<meta name="viewport" content="width=device-width, initial-scale=1">

You'll probably want this in your CSS as well:

@-ms-viewport{
    width: device-width;
}

Upvotes: 3

hjcoder18
hjcoder18

Reputation: 479

You should have something similar to class="col-sm-12" instead of class="col-12". Check out w3 schools bootstrap: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Upvotes: 0

Related Questions