[Support request] Form layout on mobile

[Matteo]

Hi,

if you check this page on desktop, the newsletter’s form is ok.

But on mobile, the block has a narrow container width that I can’t change because it’s a Thrive Leads default block.

How can I do to style that block better?

I’d like to have the form field, the checkboxes, and the button with a bigger width.

P.S: that page will be my new homepage.

Thanks.

[Elvin]

Hi there,

Can you specify which exactly do you want styled on mobile?

If it’s the thrive lead forms, that’s something out of the theme’s scope of support as the theme doesn’t control how it is styled.

But to help you out:

I worked for Thrive for a few months last year, and if I remember it right, Thrive Leads form is styled within its plugin’s UI. I believe it’s using Thrive architect as shown here – https://share.getcloudapp.com/8Luo2OnJ – which has its own responsive toggle for different styles on different viewports.

[Matteo]

Inside the plugin’s UI, it looks ok.

But if you use a smartphone, there’s too much space on the left and the right.

I’d like to have the same margin/padding settings as the previous text (headline).

[Elvin]

You can try adding this CSS to override the plugin’s styling:

@media(max-width:768px){
.thrv-leads-form-box.thrv_wrapper {
    padding: 0;
}
}

But it won’t be exactly the same as the heading because the actual heading element is overflowing outside the container.

See this – https://share.getcloudapp.com/o0uebwn4

You can see that the form adheres to the padding of the GB container but the headline overflows.

[Author]

Posts