Very wide contact form on home page

Illdy
1

Hello,

The contact form on my home page is very stretched out. Is there a way to make it narrower or zoom out?

Hope to hear from you soon.

Jason

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile: In order to check your question i need to see your live website, please provide url and i will take a look

3

Hi there

Hope you are having a good day and thank you for your question :slight_smile: In order to check your question i need to see your live website, please provide url and i will take a look

4

The website is www.grobos.nl

Thanks in advance :slight_smile:

5

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the form size by going to Appearance > Customize > Additional CSS and pasting it there.


#contact-us .section-content .wpcf7-form {
    width: 88%;
    margin: 0 auto;
}

Best Regards,
Support

6

Thank you! Updated the site and the new form looks great. Only issue is that our address and social handles in the contact section now don’t align with the form. Would this also be possible with a CSS?

Thanks in advance.

7

Oh and btw, our header looks huge on the mobile version of the site. Not sure if I have to start a new thread for this, but would really appreciate any tips on that! A way to make the header and logo smaller only on mobile would be awesome.

Thanks!!

8

hey there

Please add this CSS in appearance - customize - additional CSS

#contact-us > div.section-content > div > div:nth-child(1) > div {
width: 88%;
margin: 0 6%;
}

WHich header looks huge? can you show me what exactly you want to change on the screenshot?

Thanks!
Colorlib Support Team

9

Code works perfectly thank you!

I attached a screenshot of the mobile header, it just covers so much of the screen. On PC it looks perfect, but on mobile I’d like it to be less long along with the logo.

10

HI

Ok, in this case please try this css:

@media only screen and (max-width: 992px) {
#header .top-header {
padding-top: 9px;
padding-bottom: 5px;
}
}

11

Great CSS! Just need to make the logo smaller if that is possible :slight_smile:

12

hi

No, logo must be used small image :slight_smile:

13

I am using contact form 7 on my websites show-box.one and mobdroapp.one on home page. It shows different view for both website. How can I fix this issue? please help me.

14

I managed to make the website look a lot better on mobile by widening the banner on the bottom.

Thanks so much for your help!!

15

Hi there,
I’m glad you managed to have this figured out.
Please let us know if you have any more questions.
Best Regards,
Support.

16

Hi there,
I’m glad you managed to have this figured out.
Please let us know if you have any more questions.
Best Regards,
Support.

17

Hi, there I will close this case now, Feel free to contact us again if you have other questions Thanks!