Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 7, 2017 at 3:16 am #804790
    Jasmer

    Hi,

    How do I keep the form fields below centered?

    The screenshot below is from an iPhone 6 and the form fields are off center.
    However, the fields are centered perfectly on an iPhone 7 Plus.

    Why does the Enfold theme not center these automatically? I’d like to know if there is something I can do differently, because I don’t want to center the fields on different devices every time I build a website.

    Thank you,

    Jasmer

    • This topic was modified 7 years, 6 months ago by Jasmer.
    June 8, 2017 at 12:30 am #805394
    Jordan Shannon

    Hey Jasmer,

    Add this to quick css:

    


@media only screen and (max-width: 767px)  {
.page-id-18 .avia-builder-el-2{
padding:0!important;
}}

    Best regards,
    Jordan Shannon

    June 8, 2017 at 2:31 am #805416
    Jasmer

    HI Jordan,

    It helps but causes additional problems.

    The white overlay is off. See screenshot below.

    1. I’d like to reduce the width of the form fields so they fit into the overlay evenly.

    2. I’d like to change the height and position of the white overlay to center and also overlay the text.

    I’d like to stay as simple as possible with this CSS, but I like the direction you are going.

    Thank you,

    Jas

    June 8, 2017 at 3:56 pm #805623
    Jordan Shannon

    Hi,

    Adjust the css to the following:

    @media only screen and (max-width: 767px)  {
.page-id-18 .avia-builder-el-2{
padding:20px!important;
}}

    Let me know if this fixes it.

    Best regards,
    Jordan Shannon

    June 9, 2017 at 11:00 am #806001
    Jasmer

    Hi Jordan,

    Yes that is good. But I’d like to increase the top of the overlay by 20px as well.

    I wasn’t everything to stay the same, but I want the white overlay to be taller at the top by 20px. Can you help with that?

    THANK YOU,

    Jas

    June 9, 2017 at 3:22 pm #806096
    Jordan Shannon

    Hi,

    Then just add the following to the css I gave you:

    padding-top:50px!important;

    Adjust the number to whatever it needs to be.

    Best regards,
    Jordan Shannon

    June 9, 2017 at 11:14 pm #806246
    Jasmer

    Perfect. This is what I used. But I asked a question above I’d like understand

    “Why does the Enfold theme not center these automatically? I’d like to know if there is something I can do differently, because I don’t want to center the fields via CSS on different devices every time I build a website.”

    Do I need to use a different element? This element should renderr correctly without custom CSS.

    @media only screen and (max-width: 767px)  {
.page-id-18 .avia-builder-el-2{
padding:25px!important;
padding-top:45px!important;
}}

    Thank you so much for your help,

    Jas

    June 10, 2017 at 9:38 pm #806388
    Jordan Shannon

    Hi,

    Normally all elements are automatically centered or adjusted to look good on mobile, however, it really all depends on how you have configured your page. Or, perhaps you have a plugin that has some css in conflict with the form styling. In all honesty there could be any number of reason why YOUR specific site does not have a centered form.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.