CODEWITHSUNDEEP
htmlcss
George
George

Reputation: 23

How to make a button responsive in small screens?

.form-control {
  width: 30%;
  float: left;
  margin-left: 33%;
}

h1 {
  margin-top: 2px;
}

.card-block {
  padding-top: 3px;
  border-left: 5px solid #CCC;
}

.card {
  background: azure;
}

.container {
  margin-top: 10px;
}

body {
  background: lightgray;
}

#search {
  padding-top: 13%;
}
<html>

<head>
  <title>Wikipedia Viewer</title>
</head>

<body>
  <div id="search">
    <h1 class="text-center">Wikipedia Viewer</h1>
    <input type="text" class="form-control" name="" placeholder="Search Wikipedia">
    <button id="go" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
    <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><button class="btn btn-primary">Random</button></a>
  </div>
  <script type="text/javascript" src="Wikipedia Viewer.js"></script>
</body>

</html>

How can I make that Random button to stay in the same line, even in small screens? It works fine with fontawesome icons but the text length makes it jump to the next line. Also, it would be nice if there is a way to add a fontawesome icon next to it and make it stay in the same line in smaller screens (not required).

Upvotes: 0

Views: 862

Answers (3)

perumal N
perumal N

Reputation: 651

Try this

Use btn-sm in button class

<button id="go" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-search"></span>
</button>

Upvotes: 1

Miguel
Miguel

Reputation: 20633

Wrap the controls in a container and use flexbox:

  .container {
      display: flex;
  }

HTML

<div id="search">
  <h1 class="text-center">Wikipedia Viewer</h1>
  <div class="container">
    <input type="text" class="form-control" name="" placeholder="Search Wikipedia">
    <button id="go" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
    <button class="btn btn-primary">Random</button>
  </div>
</div>

JSFiddle demo: https://jsfiddle.net/9vev9esr/4/

Upvotes: 0

Sanket Patel
Sanket Patel

Reputation: 283

make the position of button fixed: 

button{
   position:fixed;
}

This should solve your problem

Upvotes: 0

Related Questions