Support » Theme: Singl » Jetpack subscribe form CSS Tweaks

  • Hello,

    I have installed Singl and Jetpack on my blog (self hosted). I had to perform minor tweaks in the CSS file to have the subscribe form display properly.

    Basically, all you need to do is replace:
    .subscribe-form-wrapper .widget
    with:
    .subscribe-form-wrapper .widget, .subscribe-form-wrapper .jetpack_subscription_widget

    Hope that helps…

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi @djibux,

    Thank you so much for sharing the solution here. 🙂

    I was unable to replicate any trouble with Jetpack’s subscription form on a clean install of Singl. Would you be able to provide a link to your site and/or let me know the specific behind the display issues you mentioned?

    In addition: You should not edit your theme’s style.css file directly. Any changes you make there will be lost when it comes time to update your theme. Instead, you can activate Jetpack’s custom CSS module and add CSS to override the parent theme’s there.

    If you can provide a link to your site then I can help further with CSS, also.

    Thread Starter djibux

    (@djibux)

    Hello,

    You are totally right, using custom CSS rules is better. Just changed that 🙂

    The website (http://sto-live.com/) is not broken anymore. There were two issues:

    • The green “subscribe” button was displayed on the bottom right of the screen (instead of next to the email field)
    • The email field was almost 100% wide

    You can view those issues by disabling the latest embedded CSS (#19), the one with the following:

    .subscribe-form-wrapper .jetpack_subscription_widget {
    	position: relative;
    	padding: 0;
    	margin: 0 auto;
    	width: 720px;
    }
    
    /* 960px > x */
    @media only screen and (max-width: 959px) {
    	.subscribe-form-wrapper .jetpack_subscription_widget {
    		width: 688px;
    	}
    }
    
    /* 769px > x */
    @media only screen and (max-width: 767px) {
    	.subscribe-form-wrapper .jetpack_subscription_widget {
    		width: 100%;
    	}
    }

    Hi @djibux,

    Thank you for sharing the link to your site! I was able to replicate the problem and have reported it back to the team. I’ll let you know when I hear back.

    Have a great weekend in the meantime!

    Thread Starter djibux

    (@djibux)

    Great! Thanks a lot.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Jetpack subscribe form CSS Tweaks’ is closed to new replies.