[Michaela]

Hi Mahesh,
I just created a simple landing page (http://travelintense.com/newsletter-sign-up/) in order to encourage our readers to sign up to our newsletter without any distraction.
I encountered two problems:
1. At the bottom and at the top of the page is gray space – how do I remove this or color it in white, so the whole page background looks white?
2. I embedded a Mailchimp sign up form. The first part of it shows up to the right of the picture (“First Name”), but then the field for it and all that comes afterwards gets pushed underneath the picture, even though I already set the field width to a maximum of 50%. Any idea how to fix this? I want it all to show up on the righten side of the picture.
Cheers,
Michaela

[Mahesh]

Hi @micha,

I checked your given url (landing page), the site says “File not found 404 error”. Let me know as soon as the site is up.

Regards,
Mahesh

[Michaela]

Hi Mahesh,
the site should be up now, there was a migration issue by our hosting provider. Please check.
Cheers,
Michaela

[Michaela]

Whishful thinking. They just crashed the hosting again. I’ll send you a note once it is live for good. Thanks for your patience!

[Mahesh]

Hi @micha,

I checked your site before it crashed. The site is up again. 🙂
1. Remove space and change background to white:
You can fix it with Custom CSS. Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS:

.page.page-id-5384 #main {
      padding-top: 0;
}
  
.page.page-id-5384 .site {
      box-shadow: none;
}
  
.page.page-id-5384 {
      background-color: transparent;
}

2. I don’t see the picture. Please clarify more.

Regards,
Mahesh

[Michaela]

Hi Mahesh,
yeah, the website you saw up was an old version that my hosting service provider uploaded – but it was the wrong version.
Please access the link again and have a look at the page now.
Regarding 1.) I already implemented the changes you suggested for the bottom and top space, and it worked. Thanks a lot!
Regarding question 2.) I still don’t know what to do. I’d like to have the form fields to the right of the image, not underneath.
Cheers!

[Mahesh]

Hi @micha,

Okay, now I’m seeing the image. For form fields to stick to the right, add the following CSS in “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box:

.page-id-5384 .mc-field-group {
    max-width: none;
    width: 100%;
}

#mc_embed_signup .mc-field-group {
    width: 100%;
}

#mc_embed_signup {
    clear: none !important;
    float: left;
    width: 50%;
}

@media screen and (max-width: 480px) {
    #mc_embed_signup {
        float: none;
        width: 100%;
    }
}

Regards,
Mahesh

[Michaela]

Great, thanks a lot, it now shows up neat and clean!

[Michaela]

Hi Mahesh,
I used to have some text coming up once a reader hit the subscribe button that told him to check his inbox. I don’t know why it’s not showing up, as I had tested it a couple of days ago, and it worked.
Do you know why?
Also, I have set Mailchimp in a way that it should send people to this page once they hit the submit button: http://www.travelintense.com/newsletter-opt-in. This doesn’t work either, maybe because I use an embedded form and not their general sign up form.
As these two options don’t work, I need to find another option of telling my subscriber what’s happening once he has hit the button, because the fields get simply emptied and he is sent an email. But as he doesn’t know about the email, he might try signing up a couple of times. In order to avoid this, I at least want to have some small print that tells him about what’s coming next.
This should be the text:
<span style="font-size: 10px;">After you hit the subscribe button you should check your emails for a message from us.</span>
Right now it’s showing up all the way to the right. This is not really what I want. It should show up right underneath the submit button (not under the picture, which would happen if I used `<div class=”clear”></div>). How do I achieve this?
Thanks a lot!

[Mahesh]

Hi @micha,

Sorry for the late reply.
May be you have made some changes in the MailChimp so you are facing the issue.
For the second question (CSS fixes), add subscribe-info class in the span like follows:
<span class="subscribe-info" style="font-size: 10px;">After you hit the subscribe button you should check your emails for a message from us.</span>

Then add the following Custom CSS:

.subscribe-info {
    float: left;
    width: 50%;
}
  
@media screen and (max-width: 668px) {
    .subscribe-info {
        width: 100%;
    }
}

Let me know if this helps.

Regards,
Mahesh

[Michaela]

Great, that worked Mahesh. Thanks a lot!
And I think I also fixed the issue that Mailchimp didn’t show the message once you hit the subscribe button:
1. It seems they change their embedded form code quite regularly, so I updated the one I had.
2. To make the title of the fields “First Name” and “Email Address” look the same like the rest of the text in terms of size, I had marked this to lines and defined them as p (paragraphs). Apparently when you do this, it screws up the triggering of the javascript code that should show up when a subscriber hits the button. I therefore didn’t define it as p, but styled it in my CSS.
Hope this helps some other people in the future who have similar issues.
Thanks a lot for your help!
Michaela

[Mahesh]

Hi @micha,

Thank you for your appreciation and detailed explanation on how you resolved your issue. Yes, it does help people having similar issues.
If you like my support and Catch Kathmandu theme then please support by providing your valuable review and rating at https://wordpress.org/support/view/theme-reviews/catch-kathmandu?rate=5#postform

Have a nice day.

Regards,
Mahesh

[Author]

Posts