[Support request] Layout Problem – URGENT

[Michael]

would appreciate your help with this ASAP.

On this page I have a layout problem which I need to resolve by tomorrow morning.

The sign up form is somehow shifted to the right on cell phones while on desktop it looks perfectly centered.

Here is what I’m using as the customization as per your suggestions

}
.page-id-2879 .footer-bar .widget_nav_menu li#menu-item-2206 {
    display: none;
}
.page-id-2879 .footer-bar .widget_nav_menu li#menu-item-2879 {
    display: none;
}
	body.page-id-2879 .site.grid-container {
    max-width: 790px;
}
body.page-id-2879.one-container .site-content {
    padding: 40px 80px;
}

can you please advise today because tomorrow will be our video release to the public on this page.
Thank you

[Michael]

I’m hoping you haven’t forgotten about me. Can you please help?

[Leo]

Hi Michael,

Can you please make sure this is done first so we can inspect the code better?
https://www.screencast.com/t/Rf4G4xwcbd

Also please try to refrain from bumping your topic – we reply to every question within 24 hours and most of the time it’s much shorter.

Your patience is appreciated 🙂

[Michael]

okay I deactivated the cache thank you

[Leo]

This isn’t a theme issue so there isn’t anything we can fix from the theme’s standpoint

I’d say that the form plugin or script you are using is not the best.

The container itself it centered but it’s using a fixed width which isn’t responsive:
https://www.screencast.com/t/YGIcIxx6

Can you check with the plugin support to see how that can be improved?

[Michael]

Leo, I found the problem. It’s in the padding.
when I changed…

}
body.page-id-2879.one-container .site-content {
    padding: 40px 80px;

to…

}
body.page-id-2879.one-container .site-content {
    padding: 40px 40px;

it fixed the issue. However I can’t have the padding that I wanted. The page is too wide for what I want to do. The support for the form told me this…
“The form was going over the margin because it’s wider than the page. The page is set for 160px, the form was set to 320px. You changed the width of the form to 160px, and this should work for the form to display correctly. Perhaps this is now a padding issue.”

I’m hoping you can help me to get back the 40px 80px setting that I originally wanted?
thank you

[Leo]

I wouldn’t say the issue is in the padding.

It worked because reducing the padding gives the fixed width (non-responsive) form more room so it appeared to be centered but it is actually still not completely centered as seen here:
https://www.screencast.com/t/G49jyBINDm

There isn’t a way to use 80px left and right padding is the form itself isn’t responsive as there is simply not enough room.

[Michael]

okay so you are saying I have to live with what I have?
Is there any other option?
Thanks

[Leo]

If the form itself is fixed width at 257px as my screenshot above shows then using 80px left and right padding just won’t work.

If you can reduce the form down to like 150px in width then the 80px should work.

[Author]

Posts