Mobile/Tablet header looks different than desktop

On this part of the CSS Ying provided:

.mc4wp-form-fields {
    display: flex;
}

Modify it to this:

.mc4wp-form-fields {
    display: flex;
    justify-content: center;
}

This should center the form like this - https://share.getcloudapp.com/nOu5jyAZ

Hm it still looks off-centered for me.

It's actually mathematically centered to its container but going to be off-center if you view it on smaller mobile device as the padding-left of the off-canvas menu will push all items to the right. Another issue if because the form isn't responsive so it's too big for smaller viewports.

Adding this CSS should make the form a bit responsive. (resizes the width to 100% of parent so it squishes)

nav#generate-slideout-menu form#mc4wp-form-2 {
    width: 100%;
}

Oh yeah that did it thanks!

After messing around with all this, it seems my mobile/tablet header background is not showing up. Do you know why this is?

You may have accidentally removed the CSS I've provided here - https://generatepress.com/forums/topic/mobile-tablet-header-looks-different-than-desktop/#post-2042006

Ah of course. Thanks!

I have a question about a different topic. Should I open up a different support topic or ask the question in this thread?

Please open a new one so this one doesn't get too convoluted. Thanks! :)

Haha actually...I don't what I did here but now my header got messed up. Not sure what I did exactly. I undid some css but that didn't do anything. It looks like that just for desktop so must be something specifically for that window size...

Oh I had this marked as resolved but its not. Wonder if I have to open a new thread...

Do you still need further help with the topic's original issue?

I've checked the site at the time of this reply and the mobile header is visible as shown here - https://share.getcloudapp.com/z8u1KoXz

For new topics, feel free to open new ones so it doesn't get confusing. :D