resize contact form - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
March 24, 2020 at 5:00 pm #1196895

willevo311
Participant

Hi Gang,

I was checking out this website ( https://myershomebuyers.com/ ) and saw their contact form and really liked it. (it is located on the lower section of the home page)

I have been trying to recreate the form styling in Enfold but getting stuck. I like the sizing of the form with alot of space on both sides but when I make it in Enfold, the contact form takes up the entire page. I am using a color section and then adding the contact form that comes with enfold. At first I tried using different layer elements to make the styling (so there is padding on both sides) (ex 1/3 1/3 1/3 and then adding contact form to center 1/3) but it messes up sizing for mobile. Is there a way to control the size of the contact form so it looks like the example website?

Thanks for any advice you guys have. I really appreciate it!!

March 24, 2020 at 5:50 pm #1196938
Victoria
Inactive Moderator
Hey willevo311,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
#element_avia_1_1 {
    width: 45%;
    margin-right: 10px;
}
#element_avia_2_1 {
    width: 54%;
}
#element_avia_3_1 {
    width: 45%;
    margin-right: 10px;
}
#element_avia_4_1 {
    width: 54%;
}
#top .avia_ajax_form .first_form {
    clear: none;
}
```
If you need further assistance please let us know.

Best regards,
Victoria
March 24, 2020 at 6:04 pm #1196946

willevo311
Participant

Hi Victoria!! That’s awesome.. Thanks.. What would I need to do to add padding to the sides to make it smaller and make the submit button the same size as the form? I marked up the image to show you what I mean.

Screenshot: https://i.imgur.com/EDINTYX.png

Thank you so much for your help.

I added the css that you gave me so if you need to see the changes, just refresh my website.

Have a great day!!!
Will

March 25, 2020 at 7:01 am #1197580
Rikard
Keymaster
Hi Will,

Thanks for the screenshot. Please try this CSS as well:
```
@media only screen and (min-width: 768px) {
.home #av_section_1 .container {
  padding: 0 10%;
}
}
```
```
.home #av_section_1 .container .button {
  width: 100%;
}
```
Best regards,
Rikard
March 25, 2020 at 7:03 pm #1197808

willevo311
Participant

Thanks guys!! I combined both of your solutions and played with the percentages and that worked great. I did add a @media query for mobile only as well and took Victoria solution and made the percentages 100% for that one. (Just for anyone else that might want to do this.)

Thanks for all of the advice. You guys are fantastic!

This is specifically what I added to enfold CSS:

/*Victoria’s Solution */

#element_avia_1_1 {
width: 48%;
margin-right: 10px;
}
#element_avia_2_1 {
width: 50%;
}
#element_avia_3_1 {
width: 48%;
margin-right: 10px;
}
#element_avia_4_1 {
width: 50%;
}
#top .avia_ajax_form .first_form {
clear: none;
}

/*Rikard’s Solution */
@media only screen and (min-width: 768px) {
.home #av_section_1 .container {
padding: 0 20%;
}
}
.home #av_section_1 .container .button {
width: 100%;
font-size: 20px;

}

/*My Addition for mobile */
@media screen and (max-width: 500px) {
#element_avia_1_1 {
width: 100%;
margin-right: 10px;
}
#element_avia_2_1 {
width: 100%;
}
#element_avia_3_1 {
width: 100%;
margin-right: 10px;
}
#element_avia_4_1 {
width: 100%;
}
#top .avia_ajax_form .first_form {
clear: none;
}
}

March 25, 2020 at 8:01 pm #1197840

Victoria
Inactive Moderator

Hi willevo311,

Glad you got it working for you and thanks for sharing your solution! :)

If you need further assistance please let us know.

Best regards,
Victoria

March 30, 2020 at 3:18 am #1198986

willevo311
Participant

This reply has been marked as private.

April 1, 2020 at 7:51 am #1199634
Rikard
Keymaster
Hi,

Thanks for the update. The CSS I gave you was specific to the home page, if you want it to apply to other sections as well then please give them the same ID in the develop tab in the element option. For example; form-section. Then change this CSS:
```
@media only screen and (min-width: 768px) {
.home #av_section_1 .container {
padding: 0 20%;
}
}
.home #av_section_1 .container .button {
width: 100%;
font-size: 20px;
}
```
To this:
```
@media only screen and (min-width: 768px) {
#form-section .container {
padding: 0 20%;
}
}
#form-section .container .button {
width: 100%;
font-size: 20px;
}
```
Best regards,
Rikard
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.