[krheineParticipant]

Good morning,

I am relatively new to using the slider revolution and have recently added a static newsletter hero to my website to capture email addresses of site visitors who are interested in trying my product. Do you know how I can horizontally align the email entry and submit buttons and center them under the subtitle?

ALSO, do you know how I can make the email entry box and submit buttons the same height? The submit button seems to be a bit taller but I like how clean the example looks here.

Thank you for all of your continued assistance!

[RadModerator]

Hi there,

Thanks for posting in.

It’s horizontally aligned on my end. Would you mind providing a screenshot of what you’re getting?

About the height, please add this CSS to Admin > Appearance > Customizer > Custom > CSS

#mc_embed_signup input#mce-EMAIL {
    height: 3.05em;
}

Thanks!

[krheineParticipant]

Thank you! This seems to have fixed the sizing issue. On my end, I am seeing the attached. Unfortunately the email entry box and submit button are stacked and I would like them to be horizontally aligned and centered. Any thoughts?

Thanks again!

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

@media (min-width:979px){
div#mc_embed_signup {
    width: 800px !important;
    margin: 0 auto !important;
    float: none !important;
    display: block !important;
    position: relative;
    left: -107%;
}
input#mce-EMAIL {
    width: 70% !important;
}
}

Hope it helps.

[krheineParticipant]

Worked perfectly! Thanks!

[John EzraMember]

You’re most welcome!

[krheineParticipant]

One more question regarding my Slider Revolution (site is http://www.gocarpediem.com) — hopefully you can help. On mobile, my Hero seems to me loading improperly.

The email capture stretches from edge to edge of the screen, would it be possible to add some padding on mobile?

Also, the “Get exclusive early access” seems to be loading below the email capture on mobile when it should be above — thoughts?

Lastly, the “Conquer the Morning” header does not seem to be loading at all on mobile. Do you know how I could get this to appear and scale properly for mobile devices?

I apologize for all of the questions (I’m still getting the hang of X and WordPress). Thank you so much in advance for your assistance!

[RadModerator]

Hi there,

That’s possible but may lead to more issues.

Instead of applying CSS to slider layers that force their position and scaling. You should use custom grid size. That way, you can position and style your layers specific to each device.

http://www.themepunch.com/revslider-doc/slider-setup/#slidelayout

You can also use the layer responsive option like from here http://www.themepunch.com/revslider-doc/layer-settings/#layerbehavior

Other layers are loading, but they are covered by another layer. You should really use cutrom grid size.

Thanks!

[krheineParticipant]

Awesome! I didn’t realize you could do this, this worked perfectly. And just to make sure, there is no way to keep the email capture stretching from edge to edge of the screen on mobile?

Thanks!

[FriechModerator]

Hi There,

We could reduce the email field and the blue button with the custom css below:

@media (max-width:  420px) {
	#mc_embed_signup input#mc-embedded-subscribe,
	#mc_embed_signup input#mc-embedded-subscribe:focus {
		font-size: 10px;
	}
	#mc_embed_signup input#mce-EMAIL {
		max-width: 110px;
	}
}

Hope it helps, Cheers!

[krheineParticipant]

Amazing, thanks again!

[Rue NelModerator]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts