Jump to content
newcoder1010

How to have an inline form centered and responsive

Recommended Posts

Hello,

 I would like to have a responsive inline form. Form only has header, a text field and submit button. Form should be centered in every device.

<section id="block-webform-client-block-66" class="block block-webform bnh contextual-links-region clearfix">

<h2 class="block-title">Get Your Offer NOW!</h2>

<form class="webform-client-form webform-client-form-66" action="/" method="post" id="webform-client-form-66" accept-charset="UTF-8">

<div>

<div class="form-item webform-component webform-component-markup webform-component--get-your-fair-cash-offer-now form-group form-item form-type-markup form-group">
<h2>Enter Address NOW!</h2>
</div>

<div class="form-item webform-component webform-component-textfield webform-component--property-address form-group form-item form-item-submitted-property-address form-type-textfield form-group">

<input required="required" placeholder="Property Address" class="form-control form-text required" type="text" id="edit-submitted-property-address--2" name="submitted[property_address]" value="" size="60" maxlength="128">

<label class="control-label element-invisible" for="edit-submitted-property-address--2">Property Address <span class="form-required" title="This field is required.">*</span></label>
</div>

<input type="hidden" name="details[sid]">

<div class="form-actions"><button class="webform-submit button-primary btn btn-default form-submit" type="submit" name="op" value="Get Your Offer">Get Your Offer</button>
</div>

</div>

</form>
</section>

#block-webform-client-block-66{
    background: bisque;
    padding: 0;
    margin: 0;
    text-align: center;
}

.webform-client-form-66 {
    display: block;
    text-align: center;
}

.webform-client-form-66 .webform-component--property-address {
    margin-top: 0px;
    /* display: inline; */
    margin-top: 0;
    text-align: center;
    margin-bottom: 33px;
    float: left;
}

.webform-client-form-66 .form-actions {
    clear: none;
    margin-top: 0;
    float: left;
    margin-left: 40px;
}

Now the header is centered but the form floated to left. I tried to make the form 50%width and then margin:auto. Then it works somewhat. Please advise how to place the form centered and responsive. 

Edited by newcoder1010

Share this post


Link to post
Share on other sites

To centre an inline element its parent container must be the full width of available space with text-align: center;  if you use float on parent, the parent container will collapse to width of content i.e inputs and text to the left or right depending which float is used. It is still centred, but is restricted to the collapsed width of parent.

To be responsive you can't use size attribute on its own, you need to use css width with percentage value, with min-width: of 300px (small 320px mobile width minus padding etc).

Normally when it gets down to small width devices, the display: inline-block elements are changed to display: block; using media queries, so they will stack above each other.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×