Homepage › Community Forums › Ambition › Mobile responsive Issue on Front Page 4 widget
Tagged: Ambition, mobile responsive
The Front Page 4 widget is not displaying with proper mobile responsive format on the iPhone on our site.
On the Ambition demo, the three sections that say “Mobile Responsive, Top Notch Design and SEO Optimized” split into three vertically placed sections on the iPhone.
On our development site, the same three section do NOT split and are all showing in a single horizontal row. This is allowing only up to 5 characters per line on each section.
See:
http://demo.appfinite.net/ambition/ – View on iPhone in portrait mode
http://energy.demovizion.com/ – View on iPhone in portrait mode
http://prntscr.com/bo9y95 – Screen shot of both.
What do we need to change to fix this? Thanks!
Gary Meisner
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.
Thanks much for the reply, Wes.
If we’re just using the standard Ambition theme, why does it work on the Ambition demo but not on our own site? I’d like to be able to just install your theme and have it work like the demo without css customizations. Is there a different way to get to that solution? Is that customization in the demo but not in the download?
Since the theme uses and recommends Ninja forms, it would be very helpful to put this into the standard Ambition theme rather than having it as a style.css customization. I want to avoid problems caused by future theme updates.
Let me know if we missed something or installed it wrong.
Thanks for a great theme!
Gary Meisner
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>
That’s very helpful, Wes. The Ambition theme documentation at https://appfinite.com/theme-setup/ambition-theme-setup/ lists Ninja forms, so that is the only reason we were using it. Perhaps the download demo file had that too? If installing the Genesis eNews plugin will make us consistent with the Ambition demo and resolve the issue then we will do that. Please confirm that this should take care of the problem for us. Thanks.
Gary Meisner
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.
Just a confirmation: Eliminating Ninja forms from the home page eliminated the mobile-responsive issue with Front Page 4 widget. Thanks for the quick response and resolution!
Gary Meisner
You’re Welcome!