Mighty Macro Meals
Web Design
MightyMacroMeals.com.au revolves around healthy food and convenience. Clients selects predefined packages of 12, 18 or 24 meals. These meals can easily be frozen for up to a month while keeping their freshness.
We were white labelled by Up the Ante Marketing for this project in order to remake the website and a long series of bugs. The old version of the website was built entirely in Php, leaving the client with tons of bugs and no possibility of working on his website.
We recreated the entire website, keeping the design, fixing the bugs and optimizing the website speed.
Business Owner: Richard Magallanes
Client: Up the Ante Marketing
https://mightymacromeals.com.au/
Sidney, Australia
Business Target: “Active people interested in reducing the time they spend cooking and eating healthy and nutritious foods in Sidney.”
Fast and strong Web Design
with an emphasis on flexibility
The previous website had a lot of flaws that needed fixing. While the design was great, the actual functionality of the website was lacking. A variety of bugs would randomly appear and damage the conversion process. (one example: the add to cart button would stop working)
The client also felt that he needs to be able to manage the website by himself.
In order to fix the issues and appeal to our client’s request, we recreated the entire website in the Enfold Theme, keeping the old design. By doing this and working with another freelancer for a custom made order plugin, we managed to fix all the known bugs and create a structure that allows the client a higher degree of flexibility.
Basic SEO
Image and page speed optimization.
Web Design
Fast and easy to use E-Commerce using the Enfold Theme on WordPress and a custom built order plugin for Woocommerce.
Custom CSS Implemented
/*Add your own styles here:*/
/* 1 Header */
/* 1.1 Logo */
/*.responsive #top .logo {
padding-top: 10px;
} */
/* 1.2 Burger menu */
@media only screen and (max-width: 767px) {
.only-desktop-menu { display: none !important; }
}
@media only screen and (min-width: 767px) {
.only-mobile-menu { display: none !important; }
}
@media only screen and (min-width: 767px) {
.new-burger-menu{
padding-top: 70%;
opacity: 1!important;
display: block!important;
}
.burger-inside{
width: 20px;
height: 3px;
background-color: black;
margin: 3.5px 0;
}
}
/* 1.3 Menu Uppercase Font */
span.avia-menu-text {
text-transform: uppercase;
font-family: oswald;
}
/* 1.4 Menu present on mobile */
.page-id-1574 .mobile-menu-enfold {
display:none;
}
@media only screen and (min-width: 767px) {
.mobile-menu-enfold {
display:none;
}
}
.mobile-menu-enfold {
text-align: center;
font-family: oswald;
}
.mobile-menu-enfold a {
display: inline-block;
color: #000000;
font-weight: bold;
font-size: 1em;
text-align: center;
padding: 4px 4%;
}
/* 2 Footer */
/* 2.1 Footer Dotted line */
.dotted-line{
border-top: 1px dotted #666;
}
.footer-buttons a.avia-button.av-button-notext.avia-icon_select-yes-left-icon.avia-color-custom.avia-size-small{
border: 1px solid #69af41;
border-color: #69af41;
}
.avia-button.avia-size-small{
font-size: 25px;
padding: 7px 15px 7px;
}
/* 2.2 Footer remove extra padding */
#after_section_1 {
display: none;
}
/* 2.3 Footer Links */
.footer-links a{
color:#666666;
}
/* 3 Order page */
#top .order-now-button .avia-button {
padding: 15px 30px 13px;
font-size: 16px;
font-weight: bold;
min-width: 139px;
}
#top .order-now-button .avia-button:hover {
background-color: #99e171!important;
}
/* 4 FAQ page */
.faq-page .toggler {
font-size: 18px;
font-weight: bold;
}
.faq-page .toggle_content {
background-color: white!important;
color: black!important;
border-color: #dddddd;
}
@media only screen and (max-device-width: 736px) {
.faq-layout.flex_column{
padding: 0 !important;
}}
/* 5 Calculator page */
.calculator-section input {
font-size: 18px !important;
line-height: 24px !important;
text-indent: 10px !important;
}
.calculator-section label.calc-label-small,
.calculator-section label.calc-label {
font-size: 18px !important;
line-height: 24px !important;
margin: 0 !important;
font-weight: normal !important;
}
.calculator-section { padding: 60px 0; }
.macros-calculator .dpg-h2.calc-header { background-color: #99e171; text-align: center; text-transform: uppercase; color: #fff; padding: 12px 0; margin: 0px; font-size: 30px; }
.macros-calculator .calc-row { margin-bottom: 10px; }
.macros-calculator .calc-subheader { margin-bottom: 5px; display: block; font-size: 18px; }
.gander { padding-right: 10px; }
.gander label, .gander-change label { padding-left: 5px; }
.macros-calculator .bb-flat-btn.calc-submit { background-color: #99e171; border: 1px solid #79c151; padding: 5px 25px; font-size: 20px; letter-spacing: 1px; cursor: pointer; display: block; margin: 10px 0 0; }
.calc-container { background-color: #f7f7f7; padding: 20px 25px; border-radius: 0 0 10px 10px; }
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
#top.page-id-268 label {
font-size: 18px !important;
}
@media (min-width: 992px){
.page-id-268 .col-md-1, .page-id-268 .col-md-2, .page-id-268 .col-md-3, .page-id-268 .col-md-4, .page-id-268 .col-md-5, .page-id-268 .page-id-268 .col-md-6, .page-id-268 .col-md-7, .page-id-268 .col-md-8, .page-id-268 .col-md-9, .page-id-268 .col-md-10, .page-id-268 .col-md-11, .page-id-268 .col-md-12 {
float: none!important;
}
}
.dpg-calculator.macros-calculator {
border-right: 5px solid #99E171;
border-left: 5px solid #99E171;
border-bottom: 5px solid #99E171;
}
.page-id-268 .form-control {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 1rem;
line-height: 1.25;
color: #495057;
background-color: #fff;
background-image: none;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
#top label {
font-size: 2em;
}
.page-id-268 .row {
margin-bottom: 10px!important;
}
/*
.page-id-268 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
padding-left: 0px;
padding-right: 15px;
}
@media (max-width: 992px){
.page-id-268 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
padding-left: 0px;
padding-right: 1px;
} */
.macros-calculator .dpg-h2.calc-header{
font-size:20px;
}
#top label {
font-size: 1.5em!important;
}
#top .main_color .input-text, #top .main_color input[type=’text’], #top .main_color input[type=’input’], #top .main_color input[type=’password’], #top .main_color input[type=’email’], #top .main_color input[type=’number’], #top .main_color input[type=’url’], #top .main_color input[type=’tel’], #top .main_color input[type=’search’], #top .main_color textarea, #top .main_color select {
border-color: #ebebeb;
background-color: white;
color: #969696;
}
.page-id-268 #top .input-text, #top input[type=”text”], #top input[type=”input”], #top input[type=”password”], #top input[type=”email”], #top input[type=”number”], #top input[type=”url”], #top input[type=”tel”], #top input[type=”search”], #top textarea, #top select {
-webkit-appearance: none;
padding: 8px 6px;
outline: none;
font: 1.5em “HelveticaNeue”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
border-radius: 0px;
}
/* 6 Delivery info page */
.delivery-time h3 {
padding-bottom:15px;
text-transform:uppercase;
padding-top:35px;
vertical-align: middle;
}
@media (max-width: 768px){
.delivery-time {
width: 100%!important;
}
}
.delivery-time {
text-align:center;
height: 350px;
width: 350px;
margin: 25px auto 25px;
padding: 10px 10px 10px 10px;
border: 1px solid #99e171!important;
}
.delivery-time span {
color: #99e171;
font-weight:bold;
font-size:20px;
padding-bottom:10px;
vertical-align: middle;
text-transform:uppercase;
}
.delivery-time:hover{
background-color: #99e171;
text-align:center;
}
.delivery-time:hover span {
color: #fff;
font-weight:bold;
}
.delivery-page-form .select{
background:white!important;
}
#top .delivery-page-form label {
font-weight: bold;
font-size: 1em;
text-transform: uppercase;
}
/* 7 Terms of Service page */
.term-service h2{
margin: 25px 0 30px;
background-color: #EFEFEF;
padding: 15px;
color: #000;
}
@media (max-width: 767px){
.terms-collumn {
padding: 0px!important;
background-color: transparent!important;
border: none!important;
}
}
/* 8 Contact page */
#map .container {
width: 100% !important;
min-width: 100%;
padding: 0;
margin: 0;
}
/* 9 – Order Form */
#mmpof-main > .container {
width: 100% !important;
min-width: 100% !important;
padding: 0;
margin: 0;
}
/* 10 Home Page */
.order-heading h2{
position:relative;
padding-bottom:15px;
}
.order-heading h2::after{
position: absolute;
content: “”;
width: 200px;
border-bottom: 1px dotted #9d9d9d;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
bottom: 4px;
}
.order-heading span{
color: #99e171;
}
.image-overlay{
display: none !important;
}
/* 11 – Woocommerce */
.woocommerce .col-1,
.woocommerce .col-2 {
max-width: 100% !important;
}
.checkout .woocommerce-input-wrapper {
display: inline-block !important;
width: 100%;
}
.payment_box.payment_method_braintree_credit_card {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.wc-braintree-hosted-field-parent {
padding: 0;
width: 100%;
}
.woocommerce #payment div.payment_method_braintree_credit_card div.form-row {
padding: 10px 0 !important;
}
.wc-braintree-hosted-field-parent label {
min-width: 300px !important;
}
