JetPack Email Subscription Form

Community Forums Forums Design Tips and Tricks JetPack Email Subscription Form

This topic is: not resolved

Tagged: 

This topic contains 9 replies, has 3 voices, and was last updated by  wmwebdes 1 year ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #33542

    Nandita
    Participant
    Post count: 29

    I am Nandita B, and my blog is http://99clicks.net

    I have placed an Email Subscription form on my sidebar using JetPack widget. But the problem is -

    Email field and “Subscribe” button are not aligned inline, instead they appear one below other.

    Can you help me?

    #33554

    benjeeno
    Participant
    Post count: 248

    Try this, add margin-bottom: 10px;

    input {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    margin-bottom: 10px;

    }

    #33555

    Nandita
    Participant
    Post count: 29

    Hi Benjeeno,

    I added your CSS Code, but still the Email Box and Subscribe button not aligned inline (horizontally). Only 10px added to the lower margin of Email Box.

    #33560

    wmwebdes
    Participant
    Post count: 102

    Hi Nandita
    Are you saying you want it to look like my subscribe form?

    http://www.wmwebdesign.co.uk/blog/

    #33561

    benjeeno
    Participant
    Post count: 248

    I suspect that could be solved in the subscriptions.php file of following folder path: wp-content > plugins > jetpack > modules. The file subscriptions.php is inside the modules folder and I don’t know enough about PHP to alter that one. So, hopefully someone picks this up, but at least you have separation between the inputs. The inputs are in separate <p> containers. I would just leave it as is, if you had them inside the same <p> tag then the text input where viewers would put their email address into might kick down below the submit button when your site is viewed on a mobile phone. I noticed your site is Responsive.

    BTW, on that last solution, better to use this ID because it doesn’t affect the spacing below the button and the widget content below that. So, remove the margin-bottom from the other rule and use this new one below:

    #subscribe-field {
    margin-bottom: 10px;

    }

    #33566

    wmwebdes
    Participant
    Post count: 102

    Just played around with your CSS and got the two elements to align horizontally.

    I’ll post CSS tomorrow.

    #33567

    Nandita
    Participant
    Post count: 29

    I simply want to align the “Email Subscription Box” and the “Subscribe” button horizontally. Not one below the other.

    @ wmwebdes, your ‘GO’ button is below the ‘Email Input or Subscription Box’.

    @ benjeeno, I added the below code, but no result :(

    #subscribe-field {
    margin-bottom: 10px;

    }

    #33568

    benjeeno
    Participant
    Post count: 248

    In Chrome Developer tools I was able to get it to work. Try a couple other things then. Oh, did you make sure to have a closing “}” bracket on the rule?

    You could also add “! important”

    #subscribe-field {
    margin-bottom: 10px ! important;

    }

    OR

    input #subscribe-field {
    margin-bottom: 10px ! important;

    }

    #33671

    wmwebdes
    Participant
    Post count: 102

    Just did this:
    Image shows elements aligned and the CSS I changed.

    http://ow.ly/i/1Q5zI/original

    Used Chrome Developer tools to tweak the CSS

    #33673

    wmwebdes
    Participant
    Post count: 102

    Meant to ask Nandita
    Which browser are you using?

    Just checked on Chrome and IE 9 and my elements are in line.

    http://www.wmwebdesign.co.uk/blog/

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.