How to fix an input within a responsive div

Question

How to fix an input within a responsive div

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I have a div with an image in background and a input of type text. I need the input to be in a certain position and as the resolution changes, it goes down so as not to cover the "Connect to focus" heading. I'm using Bootstrap (if needed):

ThisiswhatIhave,buttheinputgetsaftertheimageatlowerresolutions.Howtolimitdiv,preventingthis?

<divclass="conecte-se">
            <div class="caixa-email">
                <input type="text" name="email" placeholder="Digite seu e-mail..." class="input-email"/>
            </div> 
        </div>

CSS:

.conecte-se{
  width: 100%;
  background: url('../images/conect-foco.jpg');
  height: 493px;
  margin-top: 100px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.caixa-email{
  margin: 0 auto;
  text-align: center;
  padding-top: 348px;
}

.input-email{

  width: 52%;
  height: 45px;

}

html css

asked by anonymous 21.10.2015 / 17:22

2 answers

2

Set the input position to fixed:

#idinput{
    position: fixed;
 }

21.10.2015 / 19:04

Generate an array in function of another without bottlenecks How to pass text from textbox to report, with VS 2015, in C #?

score 2 · Accepted Answer

It is not enough to "fix", you just have to try to keep other elements from overwriting the text. One option is to use flexible layout, but check out support that browsers offer.

If you need to support IE in the version prior to 9, in this question there are some solutions to center the elements vertically , which apparently is what addresses your question.

References: align items | flex | flex-flow | justify-content .

Example of div occupying 100% horizontal / vertical document:

* { margin: 0; padding: 0 }

body, html, .container {
  width: 100%;
  height: 100%
}

.container {
  align-items: center;
  background: url(http://i.stack.imgur.com/IaTJ5.jpg) center center fixed;
  background-size: cover;
  display: flex;
  flex-flow: column wrap;
  justify-content: center
}

input {margin-top: 10% }

@media screen and (max-width: 480px) {
  h1, h4 { text-align: center }
}

<div class='container'>
  <h1>Se conecte com a <b>foco</b></h1>
  <h4>Saiba das nossas ofertas antes de todo mundo</h4>
  <form action='#'>
    <input type='email' placeholder='Digite seu e-mail...' />
  </form>
</div>

Example of div with fixed size at a given position in the document:

* { margin: 0; padding: 0 }

body, html {
  width: 100%;
  height: 100%
}

/**
 * Simulando que o div está em uma posição da página.
 **/
.container {
  margin-top: 10%;
  height: 200px;
  width: 100%
}

.container {
  align-items: center;
  background: url(http://i.stack.imgur.com/IaTJ5.jpg) center center fixed;
  background-size: cover;
  display: flex;
  flex-flow: column wrap;
  justify-content: center
}

input {margin-top: 10% }

@media screen and (max-width: 480px) {
  h1, h4 { text-align: center }
}

<div class='container'>
  <h1>Se conecte com a <b>foco</b></h1>
  <h4>Saiba das nossas ofertas antes de todo mundo</h4>
  <form action='#'>
    <input type='email' placeholder='Digite seu e-mail...' />
  </form>
</div>

The only rule applied in smaller resolutions was to horizontally center the text, the rest is all handled by flexible boxes.