Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 22, 2016 at 4:29 pm #86002
    Michaela
    Participant

    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

    February 23, 2016 at 10:32 am #86064
    Mahesh
    Participant

    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

    February 23, 2016 at 2:47 pm #86085
    Michaela
    Participant

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

    February 23, 2016 at 3:20 pm #86090
    Michaela
    Participant

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

    February 23, 2016 at 3:44 pm #86091
    Mahesh
    Participant

    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

    February 23, 2016 at 11:56 pm #86139
    Michaela
    Participant

    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!

    February 24, 2016 at 10:10 am #86164
    Mahesh
    Participant

    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

    February 24, 2016 at 2:42 pm #86203
    Michaela
    Participant

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

    March 4, 2016 at 9:14 pm #86783
    Michaela
    Participant

    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!

    March 8, 2016 at 10:00 am #87017
    Mahesh
    Participant

    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

    March 8, 2016 at 9:47 pm #87076
    Michaela
    Participant

    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

    March 9, 2016 at 9:30 am #87105
    Mahesh
    Participant

    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
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Customize landing page’ is closed to new replies.