CODEWITHSUNDEEP
htmlcss
doniyor
doniyor

Reputation: 37856

why is this css not working ? want to put to left

I am really stuck in this silly issue. i am spending 4 hours now only on this problem.

I have a page: http://bibago.de/test.html. If you resize the page to 320px width (iphone size), it should come to this state: http://imagebin.org/267953

but what not working is that input field is not in the middle in iphone size.

this is my css: 

.newsletter{
    width: 300px;
    padding-top: 40px;
    padding-bottom: 40px;
    clear: both;      
 }

html

<div class="newsletter">
    <p class="overinput">zu bibago auf dem laufenden bleiben</p>
      <div class="input-group newsletter1">                    
       <input type="text" class="form-control" id="email" placeholder="Hier Ihre E-Mail-Adresse eintragen..">
       <span class="input-group-btn">
       <button class="btn btn-default" style="background-color: #156ac6;color: #ffffff" type="button" onclick="senden()">Senden</button>
     </span>
  </div>
</div>

what is causing this? please help, i need to put that input field with its title in center as shown in image.

Upvotes: 0

Views: 54

Answers (1)

Zeta
Zeta

Reputation: 105876

You have a relative margin (.newsletter {margin-left: 30%;} in the non-320px version) and an absolute negative margin (.newsletter1 {margin-left:-15px}).

30% of 300px is 96px, -15px results in a left margin of 81px for the input element, which is simply too much. (Also, relative and absolute values shouldn't be mixed, as those will most likely result in such behaviour).

If you want to center a fixed-width element, better use an automatically deduced margin:

.newsletter{
    width: /* ... */
    margin: auto;
}

Upvotes: 2

Related Questions