-
Hi,
I am trying to centre a WP Forms contact form in a container. Simple stuff right! In GB V1 I could do this in a few seconds, but having spent an hour with GB V2 and still can’t get the form to sit in the middle of the container, I am reaching for help again.
I think I may have made it work somehow in Desktop view, but that seems to come at the expense of responsiveness. When viewed on a mobile it is a mess again.
How can I control where the form sits in the container for all views and are the layout setting I have applied incorrect? -
Hi there,
Select the Grid column, then under the Layout settings, set the Display option to Flex.
Next, remove the empty Container inside that Grid, then set Justify Content to Center under Layout > Alignment.
-
Thanks Alvind,
That kind of works, but something is squeezing the width of the fields. I need them to be slightly wider? Also when viewed on a mobile, the main container is too big for the screen? If I reduce width to 300px in mobile view, the form doesn’t fit
-
..something is squeezing the width of the fields. I need them to be slightly wider?
The width settings are defined within the WPForms settings, but I’m not sure which specific setting needs to be changed, as I’m not very familiar with the plugin.
Alternatively, if you want to use custom CSS to adjust the form width, this CSS should do it:
#wpforms-451, #wpforms-form-451 { width: 100%; max-width: 300px; /* Adjust this value as needed */ margin-left: auto; margin-right: auto; } -
Hey Alvind, that works for desktop view thank you, but still the mobile view is not working?
-
It should inherit the width defined in the CSS.
Would you like the field width to be slightly wider on mobile devices?
-
Yes, thats what I thought, but it is not shrinking. If you look at the form on a mobile you will see the form fields are too big for the container and do not fit inside it. I too expected the form and container to changes size equally, but they clearly are not.
-
I’m not sure if we’re seeing the same layout, but this is how it looks from my end:
https://cln.sh/3MRDGf13rM53mzF68Ct6Does it look different on your end?
-
Looks exactly the same my end. The fields are supposed to be inside the circle, just like when viewed on Desktop.
-
Try this:
Select the image Container (.gb-element-a5b8648f), then set the Background Size option to Contain under the Backgrounds settings.
After that, switch to the mobile breakpoint and apply the following values:
Width: 90vw Height: 90vw Max Width: 450px Max Height: 450px -
Huummm! Not sure that has done anything except made the Desktop form look smaller in the backend, but not affected in the front end. The mobile view is still a mess?
-
Hi there.
The issue is the design itself rather than a settings problem — the circle is a background PNG on the Container, and on a narrow screen there isn’t enough room to fit four form fields inside it while keeping the circle fully visible.
The good news is that it actually looks reasonable on mobile as-is — the fields sit mostly within the circle and the decorative leaves are visible. No CSS changes are needed on your end.
If you’d like the fields to sit more precisely inside the circle, that would involve restructuring the block layout.
-
Hey George,
I am looking at it on a mobile and the form is misaligned and untidy. Maybe I will just remove the background image altogether for Mobiles and just have the form.
I am finding this Starter Site to be very clunky with V2, so probably a bad choice on my part to be persevering with it. I know it is an older V1 design, so it might be worth the team having a look at this or just removing it from the list of Starter Sites, as it doesn’t seem to play nice with GB V2.
Thanks anyway.
-
Looks like I can’t hide the background image on mobiles, any idea how I might do that?
-
Looks like I can’t hide the background image on mobiles, any idea how I might do that?
The background image is being added inline, so if you want to hide it on mobile breakpoint, you’ll need to use custom CSS:
@media (max-width: 767px) { .gb-element-a5b8648f { background: none !important; background-image: none !important; background-color: transparent !important; } } -
Thanks Alvind
- You must be logged in to reply to this topic.