Mobile responsive Issue on Front Page 4 widget

The issue is coming from your Ninja Forms plugin. It has CSS that is overriding the Theme’s CSS. If you look at the Ninja Forms CSS on line 225 it has this code which is overriding it –

.one-third,
.two-sixths {
  width: 31.623931623931625%;
  }

So to fix it, just override it by adding priority to the Theme’s Responsive CSS on line 2672. You can add !important to the width like this –

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0 0 40px;
		width: 100% !important;
	}

Add the above code in the Ambition’s Style.css file.

I’m actually using the Genesis eNews plugin on the Ambition Demo Homepage. Since you’re using the Ninja Forms for your newsletter, it loads the Plugin and all of it’s files/scripts on that page. The .one-third class is default CSS in the Genesis Framework, and it just so happens that Ninja Forms uses the same code in their plugin (which is why there is a conflict).

You could always add a special section in your CSS to handle customizations, or you could add it in your Genesis Themes Settings in “Header Scripts” –

<style>
@media only screen and (max-width: 800px) {

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0 0 40px;
		width: 100% !important;
	}

}
</style>

I’m using Ninja Forms for the Contact Form on the Contact Page here – http://demo.appfinite.net/ambition/contact/ And I’m using the Genesis eNews for the Newsletter on the homepage. You can use either one, or both.

The Ninja Forms definitely has more options available than the Genesis eNews plugin overall, so it would probably be better to continue using it if you like it. If you don’t need it, and you’re already using a Contact Form, then you can use the eNews plugin. It’s up to you though, both will work fine.

You’re Welcome!