CODEWITHSUNDEEP
htmlcss
Umair Shah
Umair Shah

Reputation: 2280

Can't get the form elements to be in one line and also be responsive?

I am trying to keep the the form elements in one line and as to keep it exactly like this way for all type of resolutions i.e to keep it responsive in the same state but whenever I try to minimize the screen resolution so the form contents get messed up and the Search button goes to the second line as I do not want it to be like that..I simply want it to be in the same state i.e the Search button to stay along next to the input even when the window is minimized so how easily that would be achievable??? As I do know that it can be achieved with the use of CSS Media Queries..!

Here is the GIF : enter image description here

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

Here is Code :

HTML :

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="padding: 7%;margin-top: 100px;">
        <h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1>
        <form>
            <input class="icon" name="search" placeholder="Search Torrent Name" type="text"> <input class="btn btn-secondary" name="search" type="submit" value="Search">
        </form>
    </div>
    <footer class="footer">
        <p>Copyrighted By <strong><a href="http://www.huntedhunter.com">Hunted Hunter Solutions</a></strong>.A Script By <a href="http://stackoverflow.com/users/2298933/umair-shah-yousafzai?tab=profile"><strong>Umair Shah Yousafzai</strong></a></p>
    </footer>
</body>
</html>

CSS :

input[type=text].icon {
    width: 89%;
    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 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #eee2e2;
    margin-left: -0.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;
    }
    .btn {
    border: 1px solid turquoise;
    padding: 1.2% 1.5rem;
    font-size: 1rem;
    border-radius: .25rem;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }

Upvotes: 0

Views: 50

Answers (1)

Lars
Lars

Reputation: 3628

You could use a flex-box for this.

Add the .flex class to your <form> tag, along with the rules:

.flex {
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;      
}

replace width: 89%; with flex-grow:4; on the input[type=text].icon selector,

Finally add flex-grow:1; and margin-left:5px; to the .btn selector

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 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #eee2e2;
  margin-left: -0.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;
}

.btn {
  flex-grow: 1;
  margin-left: 5px;
  border: 1px solid turquoise;
  padding: 1.2% 1.5rem;
  font-size: 1rem;
  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;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div style="padding: 7%;margin-top: 100px;">
    <h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1>
    <form class="flex">
      <input class="icon" name="search" placeholder="Search Torrent Name" type="text" /> <input class="btn btn-secondary" name="search" type="submit" value="Search" />
    </form>
  </div>
  <footer class="footer">
    <p>Provided without garanties by a <strong><a href="http://www.thefreedictionary.com/welldoer">Welldoer</a></strong>. A Script By <a href="http://stackoverflow.com/users/1203738/lars"><strong>Lars</strong></a></p>
  </footer>
</body>

</html>

Upvotes: 1

Related Questions