Responsive Design and Alignment Issues

  • Resolved zackmathis

    (@zackmathis)


    5 years, 2 months ago

    I’m working to implement a new Contact Form through Forminator. The answers get emailed and sent to a Google Sheet through the included integration so my team can see the message, status, and response/action taken.

    A couple of issues. The first and probably easier one to solve is: I can’t figure out how to get the form to align in the center. I like that the fields are left-aligned, but I want the block to be center-aligned under the title.

    Second: The fields are too wide on desktop but become too narrow on mobile when I try to resize them via CSS. I have the following in the “Additional CSS” section of WordPress:

    .forminator-textarea {
	max-width:80%!important;
}
.forminator-email--field {
	max-width:80%!important;
}
.forminator-name--field {
	max-width:80%!important;
}

    I have the same in the Additional CSS Classes field in Forminator e.g. .forminator-name--field { max-width:80%!important; } for the Name field.

    What is the best way to set a max-width (e.g. 700 pixels) on desktop and keep it full-width on mobile?

    Additionally, is there a way to make text in emails wrap better after a certain word or character count?

    Any help would be greatly appreciated!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello @zackmathis,

    Hope you’re doing well!

    The first and probably easier one to solve is: I can’t figure out how to get the form to align in the center.
    What is the best way to set a max-width (e.g. 700 pixels) on desktop and keep it full-width on mobile?

    To center the form, please try this CSS code. Add the code from Appearance > Customize > Additional CSS:

    
@media only screen and (min-width: 900px) {
#forminator-module-5539 {
width: 700px;
    margin-left: auto;
    margin-right: auto;
    left: 10%;
    position: relative;
}
}

    If you will remove the CSS code that is shared in the a=bovethread, please feel free to remove these lines:

        left: 10%;
    position: relative;

    Additionally, is there a way to make text in emails wrap better after a certain word or character count?

    Would you please elaborate on your question here? Please describe how you wish to wrap and email text?

    Please advise,

    Kind regards,
    Nastia

    Thread Starter zackmathis

    (@zackmathis)

    That looks great! Thanks, Nastia!

    Upon further consideration, the text wrapping in email isn’t that big of a deal. With our other form plugin (FormCraft), the messages come through formatted to match the width of the <div> style of the current form.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive Design and Alignment Issues’ is closed to new replies.