0

The flex box do not get too much responsive up until the point when resolution drops too much as it should have been...What could be the reason for that?? What I got was by checking when I remove the display:flex so then it seems to be resolving but the problem is then that the Search button do not stay in the same line of the search input then and goes to the 2nd line which I don't want so anyway to keep it responsive while keeping the input and the search button both in one line just like it is now???

input[type=text].icon {
  flex-grow: 4;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url(searchicon.png);
  background-position: 10px 13px;
  background-repeat: no-repeat;
  padding-left: 42px;
}

h1 {
  font-family: Arial;
  opacity: 0.6;
  text-align: center;
}

span {
  font-size: 70%;
}

.footer {
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #eee2e2;
  margin-top: 10.5%;

}

body {
  overflow-x: hidden;
}

p {
  text-align: center;
  font-family: Arial;
  opacity: 0.7;
}

a {
  text-decoration: none;
}

.btn-secondary:hover {
  color: #292b2c;
  background-color: #e6e6e6;
  border-color: #adadad;
  cursor: pointer;
}

.btn:focus,
.btn:hover {
  text-decoration: none;
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button;
}

.btn-secondary {
  color: #292b2c;
  background-color: #fff;
  border-color: #adadad;
}

.search {
  flex-grow: 1;
  margin-left: 5px;
  border: 1px solid turquoise;
  padding: 1.2% 1.5rem;
  font-size: 1.8rem !important;
  border-radius: .25rem;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
<div style="padding: 7%;margin-top: 100px;">
        <h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1>
        <form class="flex" action="get_torrents.php" method="post">
            <input class="icon" name="search" id="search" placeholder="Search Torrent Name" type="text"> <input class="btn btn-secondary search" name="submit" type="submit" value="Search">
        </form>

Here is Screenshot : enter image description here

LIVE PAGE LINK : http://huntedhunter.com/extratorrent/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Umair Shah
  • 2,305
  • 2
  • 25
  • 50
  • possible duplicate: http://stackoverflow.com/q/36247140/3597276 – Michael Benjamin Mar 08 '17 at 02:03
  • Sorry, this question is quite confusing. So you want the search box to drop to second line when the screen gets to a certain size? – Brad Mar 08 '17 at 02:08
  • @Brad : Nope..I don't want it to drop to second line but rather to be in the same line but to be in perfect responsive state as for now it does not shrink anymore than it's default size at lower resolutions..! – Umair Shah Mar 08 '17 at 02:10
  • ah ok I understand. let me look at it – Brad Mar 08 '17 at 02:11
  • @Michael_B : If this problem can't be fixed with flex so then any other way to fix it without the use of flex then??? – Umair Shah Mar 08 '17 at 02:14

0 Answers0