Mailchimp button align

Hey whdsolutions,
Thank you for your patience and the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#mc_embed_signup #mc_embed_signup_scroll #mc-embedded-subscribe {
background-image: url(https://darkeandtaylor-co-uk.stackstaging.com/wp-content/uploads/2021/08/SEND.png);
background-repeat: no-repeat;
background-color: transparent!important;
color: transparent;
background-size: contain;
background-position: 0px 0px;
height: 44px;
}

@media only screen and (max-width: 767px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 34%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 38%;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1439px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 29%;
}
}
@media only screen and (min-width: 1440px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 20%;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
The reason the button is not floating to the right is because the css you added has > instead of > typically this occurs when the code is copied from an email instead of the forum, please check this.

The image is reduced to fit the button size with the height and background-size specs in the rule, I didn’t realize you wanted the button so large. So with the large button the media queries need to be adjusted, please try this css instead of the above css:

#mc_embed_signup #mc_embed_signup_scroll #mc-embedded-subscribe.button {
background-image: url(https://darkeandtaylor-co-uk.stackstaging.com/wp-content/uploads/2021/08/SEND.png);
background-repeat: no-repeat;
background-color: transparent!important;
color: transparent;
background-position: 0px 0px;
height: 75px;
width: 190px;
}

@media only screen and (max-width: 767px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 56%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 63%;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1439px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 46%;
}
}
@media only screen and (min-width: 1440px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 31%;
}
}

Best regards,
Mike