Sign inGet GeneratePress One

Archived topic

Form layout on mobile

3 replies · Started by Matteo on May 23, 2021

Viewing posts 1–4 of 4
#1795492

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.

#1795593

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.

#1795609

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).

#1795633

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.

This archived topic is closed to new replies.