responsive center of text field in window

  • Resolved ouranos2

    (@ouranos2)


    9 years, 4 months ago

    Hi everyone,

    I’m using pop-up maker and i’ve got a css question here :

    https://xarax.pro/exohealthfit/

    The pop-up pops a few seconds after the page has loaded. I’ve centered all from “Inscription” to the end of the window with this css code :

    form#sib_form_2-form p {text-align: center;}
.widget_sib_subscribe_form .widgettitle {text-align: center;}
form#sib_form_2-form input[type=text], form#sib_form_2-form input[type=email], form#sib_form_2-form select {margin-left: 15% !important;}

    But when i resize my window, the text field isn’t responsive. It’s this part of the css :

    form#sib_form_2-form input[type=text], form#sib_form_2-form input[type=email], form#sib_form_2-form select {margin-left: 15% !important;}

    Could anybody point me to the solution ?

    Thanks for your help.

    https://www.ads-software.com/plugins/popup-maker/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Daniel Iser

    (@danieliser)

    @ouranos2 – Remove the margin-left and change the following rule to have width: 100%; and max-width: 100%;

    form#sib_form_2-form input[type=”text”], form#sib_form_2-form input[type=”email”], form#sib_form_2-form select

    Hope this helps.

    If you want it narrower then use margin: 5px auto 0; with an assigned width. auto is used to center things.

    Hope this helps.

    Thread Starter ouranos2

    (@ouranos2)

    Thanks for your kind help, Danieliser.

    It’s ok now (by using max-width: 100%) when the pop up window is under about 400px width, but the input text field is not centered anymore when the window is wider (when i change my browser window width). Here is the modified css styles :

    form#sib_form_2-form p {text-align: center;}

.widget_sib_subscribe_form .widgettitle {text-align: center;} 

form#sib_form_2-form input[type=text], form#sib_form_2-form input[type=email], form#sib_form_2-form select { width: 100%; max-width: 100%;}

    Any idea to center it in all situations ?

    Thanks agian.

    Plugin Author Daniel Iser

    (@danieliser)

    @ouranos2 – The following rule is still applying max-width: 300px;

    form#sib_form_2-form input[type=text], form#sib_form_2-form input[type=email], form#sib_form_2-form select

    Hope this helps.

    Thread Starter ouranos2

    (@ouranos2)

    Thanks a lot, that seems ok now.

    Plugin Author Daniel Iser

    (@danieliser)

    @ouranos2 – Awesome.

    Please take a moment to rate and review the plugin and or support.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘responsive center of text field in window’ is closed to new replies.

Tags