Docs

[bigboxhead]

Hello,

After importing the revolution slider example newsletter hero, There is no gap between the email box and the subscribe box and the subscribe button is bigger than the email part. This can be found on my website http://www.strawberryandblue.com on the homepage at the bottom , is there custom styling is being applied to the button from x theme and how would i remove this so that my slider look the same as the template?

Thanks Kerry

[Rupok]

Hi Kerry,

Thanks for writing in! Yes it’s causing by your custom CSS. Let’s add this as well to fix this:

.rev_slider #mc-embedded-subscribe {
  line-height: 40px!important;
}

Hope this helps.

[bigboxhead]

Sorry, where would i add this?

[Joao]

Hi There,

Please add at Appereance > Customizer > Custom > CSS

Hope that helps

Joao

[bigboxhead]

Thanks, it is nearly perfect, how would i add a little gap in between the email box and the subscribe button?

[bigboxhead]

Hi Again,

Also for some reason the email and button are not changing properly when viewed on mobile what would be the best way to fix this issue?

Thanks A Lot
Kerry

[Friech]

Hi Kerry,

To adjust the gap between email field and subscribe button add this on your custom CSS

.x-sidebar .x-subscribe-form input[type="submit"] {
	    margin-top: 30px;
}

What changes are you referring to? The form looks fine on mobile. Please clarify.

Thanks.

[bigboxhead]

Hi,

I entered the css above into the global css in custmozizer but it didn’t add a gap between the email box and the subscribe button?

The problem on mobile devices is that I would like that the email field and the subscribe button don’t go all the way to the edge as can be seen in the screenshot attactched.

Thanks
Kerry

[Friech]

Hi Kerry,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[bigboxhead]

This reply has been marked as private.

[Lely]

Hi Kerry,

Thank you for the credentials. To add space between email box and button, please use the following CSS instead:

.home input#mc-embedded-subscribe {
    margin-left: 10px;
}

For the form edge issue, we need to reduce email box size. It’s width is set to 200px on mobile. Please add this:

@media only screen and (max-width: 767px){
#mc_embed_signup input#mce-EMAIL {
    width: 150px; /*Adjust accordingly*/
}
}

Hope this helps.

[bigboxhead]

Thanks so much looks good now!!!

[bigboxhead]

Hi,

Sorry I think one last thing is that now when view on mobile it cuts off the “your email address” as you can see in the picture.

[Joao]

Hi There,

Please update this:

@media only screen and (max-width: 767px){
#mc_embed_signup input#mce-EMAIL {
    width: 150px; /*Adjust accordingly*/
}
}

to this

@media only screen and (max-width: 767px){
#mc_embed_signup input#mce-EMAIL {
    width: 150px; 
    font-size: 10px;
    padding: 20px;
}
}

Hope that helps

Joao

[bigboxhead]

Hi, after entering that code when viewing the slider on my phone i can no longer enter text in the email address field and it appears blank. Please see the photo for example

[Author]

Posts