CSS access needed to style to Theme

Hey man, hopefully this helps. Here’s what I’ve found:

Line 1163 of your theme is where the root of your problem is. The line reads:

.post-content blockquote, .post-content iframe, .post-content .mejs-container, .post-content .wp-video {
    width: 1296px !important;
    margin-left: -196px;
}

We only want to grab this specific iframe as to not disturb the styling of the other iframes you may have in your site, so add this code to override this iframe’s CSS:

.krown-form iframe {
	margin-left: 0 !important;
	margin-top: 0 !important;
}

I also noticed your “privacy & terms” text went a little crazy. You should be able to add position relative to your iframe to fix this problem.

Finally, now that we’ve fixed the location of your recaptcha, it seems the submit button is down a little further than it needs to be. Personal preference, but it looks like you’ve added some custom CSS that needs a bit revised.
You originally added 175px of top margin to your submit button, I would only add 100px.

#comments #submit {
	margin-top: 100px !important;
	width: 100% !important;
}

Hopefully this helps at all. You should be able to modify your theme’s CSS to fix these problems, or alternatively add them in WordPress’ new Custom CSS box in the theme appearance menu. Looks like that might have been where you added your stylings for the submit button.

Hope this helps!!!

Thanks it kind of helped in the main position of the plugin. But nothing I do seems to make the privacy and terms move over.

Try this

.rc-anchor-normal .rc-anchor-pt {
    position: static !important;
    width: auto !important;
    padding-right: 0 !important;
    margin: 4px 2px !important;
}

I marked them as important to be sure they overrode the recaptcha’s stylesheet that it pulls in, but you may or may not need it.

Thanks for that.

Didn’t do anything ??

How can I find what is causing the elements to move over like this?

Do you still have the code in there so I can see what’s not being applied? I don’t see the code is even accessing the div.

You can find the element by right-clicking on the privacy and terms div and clicking “inspect element”. It’ll probably say something a little different depending on what browser you’re using. From there you can see what styles are being applied to your .rc-anchor-pt class. Currently only the default styles are being applied to it, the ones you added are not at all.

I took a screenshot so you can see what I’m talking about

One minute I will add it back and you can see.

OK, it’s back

OH! I forgot it’s an iframe. You can’t edit the CSS inside of an iframe, that’s why it wasn’t applying.

Ok, remove that .rc-anchor-normal .rc-anchor-pt styling, that isn’t going to work. You just need to set your iframe to 100% width. Move that “width:100% !important” in the #comments #submit styling over to your iframe. That will fix your issue (or keep it if you like submit button being 100% width, but I think I had things reversed in my mind, that was a mistake on my part). It should look like this

#comments #submit {
	margin-top: 100px !important;
}

.krown-form iframe {
	margin-left: 0 !important;
	margin-top: 0 !important;
        width: 100% !important;
}

Thanks! That worked!!