Twitter Bootstrap Question posted in

How to make website responsive on mobile-Twitter bootstrap

my website looks great on desktop however I’m having trouble scaling it perfectly on mobile devices. I went ahead and put the meta tag on every page, but its still not scaling perfectly.

Can anyone help me out on how to accomplish this? Or perhaps a good video tutorial? Pic has been added, I’m using the a responsive app to help me out.

Also, I’m new to web development, is it terrible that I got my website perfectly on desktop and not mobile apps? Do most web developers format both desktop and mobile apps at the same time? Or is it not too terrible that I’m fixing this at the end? Just trying to learn best practice here.
Example

html {
  box-sizing: border-box;
}

*,
*: before,
*: after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

body {
  background-image: url();
  width: 100%;
  height: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  font-family: "Quicksand";
  font-size: 1.2em;
  line-height: 1.375em;
  padding: 0;
  margin: 0;
  background-color: #2F3A3B;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

navbar-brand {
  height: 3em;
  width: 3em;
  margin-top: -8px;
  border-radius: 5.0em;
  margin-right: 1em;
  margin-left: -5em;
  margin-bottom: -8px
}

.avatar {
  border-radius: 5em;
  margin-right: .5em;
  margin-left: 1em;
}

.intro {
  display: inline-block;
  width: 100%;
  padding: 65px 0 65px;
  background-color: #2A2332;
  background-size: cover;
  font-size: 1.9em;
  text-align: center;
  color: #FFF;
}

h1 {
  font-weight: medium;
  text-shadow: 5px 5px 10px black;
  position: center;
}

h4 {
  font-size: -.5em;
  position: center;
}

.container {
  margin-top: 1em;
  margin-right: 1em;
}

.bigicon {
  font-size: 35px;
  color: #808080;
}

.input-icon {
  position: absolute;
  left: .5rem;
  top: .7rem;
  /* Keep icon in center of input, regardless of the input height */
}

.btn {
  margin-right: 12em;
}

#message {
  vertical-align: middle;
}

input {
  padding-right: 30px;
}

.form-control {
  text-indent: 2rem;
  width: 75%;
}

.input-wrapper {
  position: relative;
}

@media screen and (min-width: 640px) {}

@media screen and (min-width: 960px) {}

main {
  flex: 1;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact</title>
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="contact.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>

  <!--Homepage link-->
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>

    <!--Toggle Button-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span></button>

    <!--Navbar links-->
    <div class="collapse navbar-collapse text-center" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="gallery.html">Gallery</a>
          </li>

          <!--Social Media Icons-->
          <li class="nav-item">
            <a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

            <li class="nav-item">
              <a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>

              <li class="nav-item">
                <a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>

                <li class="nav-item">
                  <a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>

                  <li class="nav-item">
                    <a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>

                    <li class="nav-item">
                      <a class="nav-link" title="Email">
                        <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
      </ul>
    </div>
    </div>
  </nav>
  <!--Intro of Contact-->

  <div class="intro">
    <h1>Contact</h1>
    <h4>If you would like to work with me, send me a message!</h4>
  </div>

  <!--Contact Form-->

  <div class="container">
    <div class="row">
      <div class="col-sm-12 mx-auto">
        <div class="well well-sm">
          <form class="form-horizontal" method="post">

            <fieldset>

              <div class="form-group">
                <div class="col-md-8 mx-auto">
                  <div class="input-wrapper">
                    <input id="fname" name="name" placeholder="Name" type="text" class="form-control">
                    <label for="fname" class="fa fa-user input-icon bigicon"></label>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <div class="col-md-8 mx-auto">
                  <div class="input-wrapper">
                    <input id="email" name="email" type="text" placeholder="Email" class="form-control">
                    <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <div class="col-md-8 mx-auto">
                  <div class="input-wrapper">
                    <textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
                    <label for="message" class="fa fa-pencil input-icon bigicon"></label>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <div class="col-md-12 text-center mx-auto">
                  <button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
                </div>
              </div>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


</body>

</html>
Tags:

3

Answers


  1. 0

    If you’re just starting out, many will tell you to a then b, or b then a.
    My personal experience is that you should focus on how to make a website for a desktop environment first. You’ll learn the basics. Slowly, but you’ll definitely get a grasp of it.

    Once you’ve completely learned HTML, CSS and some JS. I’d suggest you start learning Mobile Web Design.

    Some sites to get you going

    P.S.
    Don’t worry much about which Text Editor to choose. Many will say A has more features than B. Don’t let features stray you away from the path of learning to web develop. You’re main focus should be HOW to create a web page. How to design it. How to Debug it. How to modify it. How to add animation, etc!

    Login or Signup to reply.
  2. 0

    You should be building progressively. Meaning Element for element, you test on each of your target medias as you make changes. That way you can identify issues. Otherwise you end up with a huge structure where there could be about 30 different problems and you would need to change every DOM element to find where the issues are.

    Login or Signup to reply.
  3. 0

    You need to design things with %(Width, Height, etc.) as much as possible, and You need to explore @media queries, You are on the right track. Here is an example. Dont forget to use !important or it will not work. This tells the site/app to ignore previous css if the condition is met(in this case resolution size)

     @media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
 .centered{font-size:12pt!important;}
 }
 @media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
 .centered{font-size:11pt!important;}
 }
 @media only screen and (max-width:600px){
 .centered{font-size:10pt!important;}
 }
 @media only screen and (max-width:400px){
 .centered{font-size:9pt!important;}
 }
 @media only screen and (max-width:200px){
 .centered{font-size:8pt!important;}
 }

 .centered{ 
 position: absolute; 
 width:100%;
 height:auto;
 text-align:center;
 font-size:14pt;
 }

    The HTML

     <div class="centered">Hello</div>

    Note you can do this for width, height, margins and everything else. Hope it helps. You will have to apply this to your needs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search