• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Lifestyle Pro Mobile Responsiveness

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Lifestyle Pro Mobile Responsiveness

This topic is: not resolved

Tagged: mobile responsive

  • This topic has 2 replies, 3 voices, and was last updated 12 years, 2 months ago by wseo.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • December 17, 2013 at 6:04 am #79735
    pbjenny
    Member

    Hello! I recently purchased the Lifestyle Pro theme which is supposed to be Mobile Responsive, but for some reason it's not appearing that way on my phone. I made a few alterations in terms of the colors and fonts, but didn't touch the widths (at least, I don't think I did!)

    Would someone mind taking a look at my stylesheet and let me know if something needs to be fixed to make the site responsive? Thank you so much!

    /*
    Theme Name: Lifestyle Pro Theme
    Theme URI: http://my.studiopress.com/themes/lifestyle/
    Description: A mobile responsive and HTML5 theme built for the Genesis Framework.
    Author: StudioPress
    Author URI: http://www.studiopress.com/
    Version: 3.0.0

    Tags: green, tan, white, one-column, two-columns, three-columns, fixed-width, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready

    Template: genesis
    Template Version: 2.0.0

    License: GPL-2.0+
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */

    /* Table of Contents

    - HTML5 Reset
    - Baseline Normalize
    - Box Sizing
    - Float Clearing
    - Defaults
    - Typographical Elements
    - Headings
    - Objects
    - Forms
    - Tables
    - Structure and Layout
    - Site Containers
    - Column Widths and Positions
    - Column Classes
    - Home Page
    - Miscellaneous
    - Common Classes
    - WordPress
    - Genesis
    - Titles
    - Widgets
    - Featured Content
    - Plugins
    - Genesis eNews Extended
    - Genesis Responsive Slider
    - Gravity Forms
    - Jetpack
    - Site Header
    - Title Area
    - Widget Area
    - Site Navigation
    - Header Navigation
    - Primary Navigation
    - Secondary Navigation
    - Content Area
    - Home Page
    - Entries
    - Pagination
    - Comments
    - Sidebars
    - Footer Widgets
    - Site Footer
    - Theme Colors
    - Lifestyle Pro Blue
    - Lifestyle Pro Green
    - Lifestyle Pro Mustard
    - Lifestyle Pro Purple
    - Lifestyle Pro Red
    - Media Queries
    - Retina Display
    - max-width: 1139px
    - max-width: 1023px
    - max-width: 767px

    */

    /*
    HTML5 Reset
    ---------------------------------------------------------------------------------------------------- */

    /* Baseline Normalize
    normalize.css v2.1.2 | MIT License | git.io/normalize
    --------------------------------------------- */

    article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

    /* Box Sizing
    --------------------------------------------- */


    @import
    url(http://fonts.googleapis.com/css?family=Allura|Open+Sans|Oswald);

    @import
    url(http://fonts.googleapis.com/css?family=Great+Vibes);

    *,
    input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    /* Float Clearing
    --------------------------------------------- */

    .clearfix:before,
    .entry-content:before,
    .entry:before,
    .footer-widgets:before,
    .nav-primary:before,
    .nav-secondary:before,
    .pagination:before,
    .site-container:before,
    .site-footer:before,
    .site-header:before,
    .site-inner:before,
    .widget:before,
    .wrap:before {
    content: " ";
    display: table;
    }

    .clearfix:after,
    .entry-content:after,
    .entry:after,
    .footer-widgets:after,
    .nav-primary:after,
    .nav-secondary:after,
    .pagination:after,
    .site-container:after,
    .site-footer:after,
    .site-header:after,
    .site-inner:after,
    .widget:after,
    .wrap:after {
    clear: both;
    content: " ";
    display: table;
    }

    /*
    Defaults
    ---------------------------------------------------------------------------------------------------- */

    /* Typographical Elements
    --------------------------------------------- */

    html {
    font-size: 62.5%; /* 10px browser default */
    }

    body {
    color: #a5a5a3;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.625;
    }

    a,
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    textarea:focus,
    .button {
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    }

    ::-moz-selection {
    background-color: #333;
    color: #fff;
    }

    ::selection {
    background-color: #333;
    color: #fff;
    }

    a {
    color: #d0a0ea;
    text-decoration: none;
    }

    a:hover,
    .site-footer a:hover {
    color: #222;
    }

    p {
    margin: 0 0 16px;
    margin: 0 0 1.6rem;
    padding: 0;
    }

    strong {
    font-weight: 700;
    }

    ol,
    ul {
    margin: 0;
    padding: 0;
    }

    blockquote,
    blockquote::before {
    color: #999;
    }

    blockquote {
    margin: 40px 40px 24px;
    margin: 4rem 4rem 2.4rem;
    }

    blockquote::before {
    content: "“";
    display: block;
    font-size: 30px;
    font-size: 3rem;
    height: 0;
    left: -20px;
    position: relative;
    top: -10px;
    }

    .entry-content code {
    background-color: #333;
    color: #ddd;
    }

    cite {
    font-style: normal;
    }

    /* Headings
    --------------------------------------------- */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 10px;
    margin: 0 0 .1rem;
    padding: 10px 10px 10px 10px;
    padding: 1rem 1rem 1rem 1rem;
    }

    h1,
    .entry-title {
    color: #f44884;
    font-family: 'Great Vibes', cursive !important;
    font-size: 30px;
    font-size: 4rem;
    }

    h2,
    .home-top .entry-title {
    font-size: 24px;
    font-size: 2.4rem;
    }

    h3,
    .archive-title,
    .comments-title,
    .home-bottom .entry-title,
    .home-middle .entry-title {
    font-size: 20px;
    font-size: 2rem;
    }

    h4 {
    background: #d0a0ea;
    font-size: 20px;
    font-size: 2rem;
    min-height: 50px;
    text-transform: uppercase;
    }
    }

    h5 {
    font-size: 18px;
    font-size: 1.8rem;
    }

    h6,
    .sidebar .entry-title {
    font-size: 16px;
    font-size: 1.6rem;
    }

    /* Objects
    --------------------------------------------- */

    embed,
    iframe,
    img,
    object,
    video,
    .wp-caption {
    max-width: 100%;
    }

    img {
    height: auto;
    }

    .featured-content img,
    .gallery img {
    width: auto; /* IE8 */
    }

    /* Forms
    --------------------------------------------- */

    input,
    select,
    textarea {
    background-color: #fff;
    border: 1px solid #eeeee8;
    box-shadow: 0 0 5px #f8f8f8 inset;
    color: #999;
    font-size: 14px;
    font-size: 1.4rem;
    padding: 16px;
    padding: 1.6rem;
    width: 100%;
    }

    input[type="checkbox"],
    input[type="image"],
    input[type="radio"] {
    width: auto;
    }

    input:focus,
    textarea:focus {
    border: 1px solid #999;
    outline: none;
    }

    ::-moz-placeholder {
    color: #999;
    opacity: 1;
    }

    ::-webkit-input-placeholder {
    color: #999;
    }

    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .button,
    .entry-content .button {
    background-color: #76d2c5;
    box-shadow: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 16px 24px;
    padding: 1.6rem 2.4rem;
    width: auto;
    }

    button:hover,
    input:hover[type="button"],
    input:hover[type="reset"],
    input:hover[type="submit"],
    .button:hover,
    .entry-content .button:hover {
    background-color: #eeeee8;
    color: #a5a5a3;
    }

    .button {
    display: inline-block;
    }

    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button {
    display: none;
    }

    /* Tables
    --------------------------------------------- */

    table {
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 2;
    margin-bottom: 40px;
    margin-bottom: 4rem;
    width: 100%;
    }

    tbody {
    border-bottom: 1px solid #eeeee8;
    }

    th,
    td {
    text-align: left;
    }

    th {
    font-weight: bold;
    text-transform: uppercase;
    }

    td {
    border-top: 1px solid #eeeee8;
    padding: 6px 0;
    padding: 0.6rem 0;
    }

    /*
    Structure and Layout
    ---------------------------------------------------------------------------------------------------- */

    /* Site Containers
    --------------------------------------------- */

    .site-container {
    background-color: #fff;
    box-shadow: 0 0 5px #ddd;
    margin: 32px auto;
    margin: 3.2rem auto;
    max-width: 1140px;
    overflow: hidden;
    padding: 36px;
    padding: 3.6rem;
    }

    .site-inner {
    clear: both;
    padding-top: 32px;
    padding-top: 3.2rem;
    }

    .wrap {
    margin: 0 auto;
    max-width: 1140px;
    }

    /* Column Widths and Positions
    --------------------------------------------- */

    /* Wrapping div for .content and .sidebar-primary */

    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
    width: 868px;
    }

    .content-sidebar-sidebar .content-sidebar-wrap {
    float: left;
    }

    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
    float: right;
    }

    /* Content */

    .content {
    float: right;
    width: 700px;
    }

    .content-sidebar .content,
    .content-sidebar-sidebar .content,
    .sidebar-content-sidebar .content {
    float: left;
    }

    .content-sidebar-sidebar .content,
    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content {
    width: 500px;
    }

    .full-width-content .content {
    width: 100%;
    }

    .lifestyle-pro-landing .site-container {
    max-width: 772px;
    }

    .lifestyle-pro-landing .site-inner,
    .lifestyle-pro-landing .entry {
    padding: 0;
    }

    /* Primary Sidebar */

    .sidebar-primary {
    float: right;
    width: 332px;
    }

    .sidebar-content .sidebar-primary,
    .sidebar-sidebar-content .sidebar-primary {
    float: left;
    }

    /* Secondary Sidebar */

    .sidebar-secondary {
    float: left;
    width: 164px;
    }

    .content-sidebar-sidebar .sidebar-secondary {
    float: right;
    }

    /* Column Classes
    Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
    --------------------------------------------- */

    .five-sixths,
    .four-sixths,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fourths,
    .three-sixths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
    float: left;
    margin-left: 2.564102564102564%;
    }

    .one-half,
    .three-sixths,
    .two-fourths {
    width: 48.717948717948715%;
    }

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

    .four-sixths,
    .two-thirds {
    width: 65.81196581196582%;
    }

    .one-fourth {
    width: 23.076923076923077%;
    }

    .three-fourths {
    width: 74.35897435897436%;
    }

    .one-sixth {
    width: 14.52991452991453%;
    }

    .five-sixths {
    width: 82.90598290598291%;
    }

    .first {
    clear: both;
    margin-left: 0;
    }

    /*
    Common Classes
    ---------------------------------------------------------------------------------------------------- */

    /* WordPress
    --------------------------------------------- */

    .avatar {
    border-radius: 50%;
    float: left;
    }

    .alignleft .avatar {
    margin-right: 24px;
    margin-right: 2.4rem;
    }

    .alignright .avatar {
    margin-left: 24px;
    margin-left: 2.4rem;
    }

    .search-form {
    overflow: hidden;
    width: 100%;
    }

    .search-form input[type="search"] {
    background: #fff url(images/search.png) no-repeat 15px 16px;
    background-size: 15px 15px;
    padding: 16px 16px 16px 44px;
    padding: 1.6rem 1.6rem 1.6rem 4.4rem;
    }

    .search-form input[type="submit"] {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
    }

    img.centered,
    .aligncenter {
    display: block;
    margin: 0 auto 24px;
    margin: 0 auto 2.4rem;
    }

    a.alignnone img,
    img.alignnone {
    margin-bottom: 12px;
    margin-bottom: 1.2rem;
    }

    .alignleft {
    float: left;
    text-align: left;
    }

    .alignright {
    float: right;
    text-align: right;
    }

    a.alignleft,
    a.alignright {
    max-width: 100%;
    }

    a.alignleft img,
    img.alignleft,
    .wp-caption.alignleft {
    margin: 0 24px 24px 0;
    margin: 0 2.4rem 2.4rem 0;
    }

    a.alignright img,
    img.alignright,
    .wp-caption.alignright {
    margin: 0 0 24px 24px;
    margin: 0 0 2.4rem 2.4rem;
    }

    .entry-content .wp-caption-text {
    font-size: 14px;
    font-size: 1.4rem;
    margin: 0;
    text-align: center;
    }

    .widget_calendar table {
    width: 100%;
    }

    .widget_calendar td,
    .widget_calendar th {
    text-align: center;
    }

    /* Genesis
    --------------------------------------------- */

    .breadcrumb {
    border: 1px solid #eeeee8;
    font-size: 12px;
    font-size: 1.2rem;
    margin-bottom: 32px;
    margin-bottom: 3.2rem;
    padding: 16px 32px;
    padding: 1.6rem 3.2rem;
    }

    .archive-description,
    .author-box,
    .sticky {
    border: 1px solid #eeeee8;
    margin-bottom: 32px;
    margin-bottom: 3.2rem;
    overflow: hidden;
    padding: 32px;
    padding: 3.2rem;
    }

    .author-box-title {
    font-size: 16px;
    font-size: 1.6rem;
    margin: 0 0 8px;
    margin: 0 0 0.8rem;
    }

    .author-box p {
    margin-bottom: 0;
    }

    .author-box .avatar {
    margin-right: 24px;
    margin-right: 2.4rem;
    }

    /* Titles
    --------------------------------------------- */

    .site-header .widget-title {
    color: #fff;
    }

    .entry-title a,
    .sidebar .widget-title a {
    font-family: 'Great Vibes', cursive !important;
    color: #f44884;
    text-decoration: none;
    }

    .entry-title a:hover {
    color: #76d2c5;
    }

    .archive-title {
    font-size: 20px;
    font-size: 2rem;
    }

    /*
    Widgets
    ---------------------------------------------------------------------------------------------------- */

    .widget {
    word-wrap: break-word;
    }

    /* Featured Content
    --------------------------------------------- */

    .featured-content .entry {
    margin-bottom: 32px;
    margin-bottom: 3.2rem;
    text-align: center;
    }

    .featured-content .entry-header {
    border: none;
    margin-bottom: 12px;
    margin-bottom: 1.2rem;
    }

    .featured-content .entry-title {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
    }

    /*
    Plugins
    ---------------------------------------------------------------------------------------------------- */

    /* Genesis eNews Extended
    --------------------------------------------- */

    .enews-widget input {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
    }

    .enews-widget input[type="submit"] {
    margin: 0;
    width: 100%;
    }

    .enews-widget input {
    margin-bottom: 12px;
    margin-bottom: 1.2rem;
    }

    /* Genesis Responsive Slider
    --------------------------------------------- */

    .widget.genesis_responsive_slider li {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    }

    /* Gravity Forms
    --------------------------------------------- */

    div.gform_wrapper input[type="email"],
    div.gform_wrapper input[type="text"],
    div.gform_wrapper textarea,
    div.gform_wrapper .ginput_complex label {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 16px;
    padding: 1.6rem;
    }

    div.gform_wrapper .ginput_complex label {
    padding: 0;
    }

    div.gform_wrapper li,
    div.gform_wrapper form li {
    border: none;
    margin: 16px 0 0;
    margin: 1.6rem 0 0;
    }

    div.gform_wrapper .gform_footer input[type="submit"] {
    font-size: 14px;
    font-size: 1.4rem;
    }

    /* Jetpack
    --------------------------------------------- */

    img#wpstats {
    display: none;
    }

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */

    .site-header {
    background: url(http://fitmama4life.com/wp-content/uploads/2013/12/HEADER2.png);
    padding: 48px 50px 48px 48px;
    padding: 4.8rem 5rem 4.8rem 5rem;
    margin-left: 25px;
    overflow: hidden;
    min-height: 348px;

    }

    /* Title Area
    --------------------------------------------- */

    .title-area {
    float: left;
    width: 320px;
    }

    .site-title {
    font-family: 'Roboto Slab', sans-serif;
    font-size: 50px;
    font-size: 5rem;
    line-height: 1;
    margin: 0 0 16px;
    margin: 0 0 1.6rem;
    display: none;
    }

    .site-title a,
    .site-title a:hover {
    color: #fff;
    text-decoration: none;
    display: none;
    }

    .site-description {
    color: #fff;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1;
    margin: 0;
    display: none;
    }

    /* Full width header, no widgets */

    .header-full-width .title-area,
    .header-full-width .site-title {
    text-align: center;
    width: 100%;
    }

    .header-image .site-description,
    .header-image .site-title a {
    display: block;
    text-indent: -9999px;
    }

    .header-full-width.header-image .site-title a {
    background-position: center !important;
    margin: 0;
    }

    /* Logo, hide text */

    .header-image .title-area {
    padding: 0;
    }

    .header-image .site-title a {
    float: left;
    min-height: 110px;
    width: 100%;
    }

    /* Widget Area
    --------------------------------------------- */

    .site-header .widget-area {
    color: #fff;
    float: right;
    width: 600px;
    }

    .site-header .search-form {
    float: right;
    margin-top: 16px;
    margin-top: 1.6rem;
    }

    .site-header .widget-area a {
    color: #fff;
    }

    /*
    Site Navigation
    ---------------------------------------------------------------------------------------------------- */

    .genesis-nav-menu {
    clear: both;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1;
    width: 100%;
    }

    .genesis-nav-menu .menu-item {
    display: inline-block;
    text-align: left;
    }

    .genesis-nav-menu a {
    color: #fff;
    display: block;
    padding: 20px 24px;
    padding: 2rem 2.4rem;
    position: relative;
    text-decoration: none;
    }

    .genesis-nav-menu > li:hover a,
    .genesis-nav-menu a:hover,
    .genesis-nav-menu .current-menu-item > a {
    background-color: #fff;
    color: #a5a5a3;
    }

    .genesis-nav-menu .sub-menu {
    left: -9999px;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
    width: 184px;
    z-index: 99;
    }

    .genesis-nav-menu > li:hover .sub-menu a,
    .genesis-nav-menu .sub-menu a {
    background-color: #fafafa;
    color: #a5a5a3;
    font-size: 12px;
    font-size: 1.2rem;
    padding: 16px 24px;
    padding: 1.6rem 2.4rem;
    position: relative;
    width: 184px;
    }

    .genesis-nav-menu > li:hover .sub-menu a:hover,
    .genesis-nav-menu .sub-menu a:hover {
    background-color: #eeeee8;
    color: #222;
    }

    .genesis-nav-menu .sub-menu .sub-menu {
    margin: -44px 0 0 183px;
    }

    .genesis-nav-menu .menu-item:hover {
    position: static;
    }

    .genesis-nav-menu .menu-item:hover > .sub-menu {
    left: auto;
    opacity: 1;
    }

    .genesis-nav-menu > .first > a {
    padding-left: 0;
    }

    .genesis-nav-menu > .last > a {
    padding-right: 0;
    }

    .genesis-nav-menu > .right {
    display: inline-block;
    float: right;
    list-style-type: none;
    padding: 20px 0;
    padding: 2rem 0;
    }

    .genesis-nav-menu > .right > a {
    background: none;
    color: #a5a5a3;
    display: inline;
    padding: 0;
    }

    .genesis-nav-menu > .right > a:hover {
    color: #7fe8e2;
    }

    .genesis-nav-menu > .rss > a {
    margin-left: 48px;
    margin-left: 4.8rem;
    }

    .genesis-nav-menu > .search {
    padding: 0;
    }

    .genesis-nav-menu .search-form input[type="search"] {
    background-position: 12px 12px;
    font-size: 12px;
    font-size: 1.2rem;
    padding: 12px 12px 12px 44px;
    padding: 1.2rem 1.2rem 1.2rem 4.4rem;
    }

    /* Site Header Navigation
    --------------------------------------------- */

    .site-header .genesis-nav-menu li,
    .site-header .widget_nav_menu ul ul {
    border: none;
    margin: 0;
    padding: 0;
    }

    /* Primary Navigation
    --------------------------------------------- */

    .nav-primary a {
    color: #7fe8e2a5a5a3;
    }

    .genesis-nav-menu > li:hover a,
    .genesis-nav-menu a:hover,
    .genesis-nav-menu .current-menu-item > a {
    color: #222;
    }

    /* Secondary Navigation
    --------------------------------------------- */

    .nav-secondary {
    background-color: #7fe8e2;
    }

    /*
    Content Area
    ---------------------------------------------------------------------------------------------------- */

    /* Home Page
    --------------------------------------------- */

    .lifestyle-pro-home .content .widget {
    margin-bottom: 32px;
    margin-bottom: 3.2rem;
    }

    .lifestyle-pro-home .featuredpost img {
    margin-bottom: 20px;
    margin-bottom: 2rem;
    }

    .lifestyle-pro-home .featured-content .entry {
    margin-bottom: 20px;
    margin-bottom: 2rem;
    padding-bottom: 20px;
    padding-bottom: 2rem;
    }

    .lifestyle-pro-home .entry:last-child {
    margin-bottom: 0;
    }

    .home-middle .featuredpost img {
    margin-bottom: 0;
    margin-right: 20px;
    margin-right: 2rem;
    }

    .home-bottom-left,
    .home-bottom-right {
    width: 332px;
    }

    .home-bottom-left {
    float: left;
    }

    .home-bottom-right {
    float: right;
    }

    .lifestyle-pro-home .content .featuredpost p {
    margin: 0;
    }

    .lifestyle-pro-home .content .widget-title {
    background-color: #76d2c5;
    color: #fff;
    padding: 12px 32px;
    padding: 1.2rem 3.2rem;
    }

    /* Entries
    --------------------------------------------- */

    .content .entry {
    border: 1px solid #eeeee8;
    margin-bottom: 32px;
    margin-bottom: 3.2rem;
    padding: 32px;
    padding: 3.2rem;
    }

    .lifestyle-pro-landing .content .entry {
    border: none;
    }

    .entry-header {
    border-bottom: 1px solid #eeeee8;
    margin-bottom: 32px;
    margin-bottom: 3.2rem;
    text-align: center;
    }

    .entry-content ol,
    .entry-content p,
    .entry-content ul,
    .quote-caption {
    margin-bottom: 26px;
    margin-bottom: 2.6rem;
    }

    .entry-content ol,
    .entry-content ul {
    margin-left: 40px;
    margin-left: 4rem;
    }

    .entry-content ol li {
    list-style-type: decimal;
    }

    .entry-content ul li {
    list-style-type: circle;
    }

    .entry-content ol ol,
    .entry-content ul ul {
    margin-bottom: 0;
    }

    .entry-meta {
    font-size: 12px;
    font-size: 1.2rem;
    }

    .entry-header .entry-meta {
    margin-bottom: 24px;
    margin-bottom: 2.4rem;
    }

    .entry-footer .entry-meta {
    border-top: 1px solid #eeeee8;
    margin: 0;
    padding: 32px 0 8px;
    padding: 3.2rem 0 0.8rem;
    }

    .entry-comments-link::before {
    content: "\2014";
    margin: 0 6px 0 2px;
    margin: 0 0.6rem 0 0.2rem;
    }

    .entry-meta .entry-tags {
    float: right;
    }

    /* Entry Navigation
    --------------------------------------------- */

    .archive-pagination {
    clear: both;
    font-size: 14px;
    font-size: 1.4rem;
    margin: 40px 0;
    margin: 4rem 0;
    }

    .archive-pagination li {
    display: inline;
    }

    .archive-pagination li a {
    border: 1px solid #eeeee8;
    color: #7fe8e2;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 4px;
    margin-bottom: 0.4rem;
    padding: 8px 12px;
    padding: 0.8rem 1.2rem;
    text-decoration: none;
    }

    .archive-pagination li a:hover,
    .archive-pagination li.active a {
    color: #76d2c5;
    }

    /* Comments
    --------------------------------------------- */

    .ping-list,
    .entry-comments,
    .comment-respond {
    margin-bottom: 40px;
    margin-bottom: 4rem;
    }

    .comment-content {
    clear: both;
    }

    .entry-comments .comment-author {
    margin-bottom: 0;
    }

    .comment-respond input[type="email"],
    .comment-respond input[type="text"],
    .comment-respond input[type="url"] {
    width: 50%
    }

    .comment-respond label {
    display: block;
    margin-right: 12px;
    margin-right: 1.2rem;
    }

    .comment-list li,
    .ping-list li {
    list-style-type: none;
    margin-top: 24px;
    margin-top: 2.4rem;
    padding: 32px;
    padding: 3.2rem;
    }

    .comment-list li li {
    margin-right: -32px;
    margin-right: -3.2rem;
    }

    .comment {
    border: 1px solid #eeeee8;
    border-right: none;
    }

    .comment.depth-1 {
    border-right: 1px solid #eeeee8;
    }

    .comment .avatar {
    margin: 0 16px 24px 0;
    margin: 0 1.6rem 2.4rem 0;
    }

    .form-allowed-tags {
    background-color: #f8f8f8;
    font-size: 14px;
    font-size: 1.4rem;
    padding: 24px;
    padding: 2.4rem;
    }

    p.subscribe-to-comments {
    padding: 24px 0 16px;
    padding: 2.4rem 0 1.6rem;
    }

    /*
    Sidebars
    ---------------------------------------------------------------------------------------------------- */

    .sidebar {
    font-size: 15px;
    font-size: 1.5rem;
    }

    .sidebar p:last-child {
    margin-bottom: 0;
    }

    .sidebar .widget {
    border: 1px solid #eeeee8;
    margin-bottom: 32px;
    margin-bottom: 3.2rem;
    padding: 32px;
    padding: 3.2rem;
    text-align: center;
    }

    .widget li {
    border-bottom: 1px solid #eeeee8;
    list-style-type: none;
    margin-bottom: 12px;
    margin-bottom: 1.2rem;
    padding-bottom: 12px;
    padding-bottom: 1.2rem;
    }

    .widget ul ul {
    border-top: 1px solid #eeeee8;
    margin-top: 12px;
    margin-top: 1.2rem;
    padding-top: 12px;
    padding-top: 1.2rem;
    }

    .widget ul > li:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
    }

    #mc_embed_signup label {
    display: block;
    color: #fff;
    font-family: 'Great Vibes',cursive !important;
    font-weight: normal !important;
    font-size: 25px !important;
    padding-bottom: 10px;
    }

    #mc_embed_signup .button {
    background-color: #f6d76b !important;
    border: 0 none;
    border-radius: 4px;
    clear: both;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: normal;
    height: 32px;
    line-height: 32px;
    margin: 0 5px 10px 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: top;
    white-space: nowrap;
    width: 200px important;
    }

    #mc_embed_signup input.email {
    display: block;
    margin: 0 4% 10px 0;
    min-width: 130px;
    padding: 8px 0;
    text-indent: 5px;
    width: 200px !important;

    /*
    Footer Widgets
    ---------------------------------------------------------------------------------------------------- */

    .footer-widgets {
    background-color: #fff;
    border-top: 1px dotted #eeeee8;
    clear: both;
    margin: 0 auto;
    padding-top: 32px;
    padding-top: 3.2rem;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3 {
    width: 332px;
    }

    .footer-widgets-1 {
    margin-right: 36px;
    }

    .footer-widgets-1,
    .footer-widgets-2 {
    float: left;
    }

    .footer-widgets-3 {
    float: right;
    }

    .footer-widgets .widget {
    border: 1px solid #eeeee8;
    margin-bottom: 32px;
    margin-bottom: 3.2rem;
    padding: 32px;
    padding: 3.2rem;
    text-align: center;
    }

    .footer-widgets li {
    list-style-type: none;
    margin-bottom: 6px;
    margin-bottom: 0.6rem;
    }

    .footer-widgets .search-form input:focus {
    border: 1px solid #ddd;
    }

    /*
    Site Footer
    ---------------------------------------------------------------------------------------------------- */

    .site-footer {
    background-color: #76d2c5;
    color: #fff;
    font-size: 12px;
    font-size: 1.2rem;
    padding: 36px;
    padding: 3.6rem;
    text-align: center;
    }

    .site-footer a {
    color: #fff;
    text-decoration: none;
    }

    .site-footer p {
    margin-bottom: 0;
    }

    /*
    Theme Colors
    ---------------------------------------------------------------------------------------------------- */

    /* Lifestyle Pro Blue
    --------------------------------------------- */

    .lifestyle-pro-blue .archive-pagination li a:hover,
    .lifestyle-pro-blue .archive-pagination li.active a,
    .lifestyle-pro-blue .entry-title a:hover,
    .lifestyle-pro-blue a {
    color: #4cc4e0;
    }

    .lifestyle-pro-blue .button,
    .lifestyle-pro-blue .genesis-nav-menu a,
    .lifestyle-pro-blue .site-footer a,
    .lifestyle-pro-blue .site-title a,
    .lifestyle-pro-blue .site-title a:hover {
    color: #fff;
    }

    .lifestyle-pro-blue .entry-title a,
    .lifestyle-pro-blue .sidebar .widget-title a,
    .lifestyle-pro-blue .site-footer a:hover,
    .lifestyle-pro-blue a:hover {
    color: #222;
    }

    .lifestyle-pro-blue .archive-pagination li a,
    .lifestyle-pro-blue .genesis-nav-menu .current-menu-item > a,
    .lifestyle-pro-blue .genesis-nav-menu .sub-menu a,
    .lifestyle-pro-blue .nav-primary a {
    color: #7fe8e2;
    }

    .lifestyle-pro-blue .button,
    .lifestyle-pro-blue .entry-content .button,
    .lifestyle-pro-blue .site-footer,
    .lifestyle-pro-blue .site-header,
    .lifestyle-pro-blue button,
    .lifestyle-pro-blue input[type="button"],
    .lifestyle-pro-blue input[type="reset"],
    .lifestyle-pro-blue input[type="submit"],
    .lifestyle-pro-blue.lifestyle-pro-home .content .widget-title {
    background-color: #4cc4e0;
    }

    .lifestyle-pro-blue .button:hover,
    .lifestyle-pro-blue .entry-content .button:hover,
    .lifestyle-pro-blue button:hover,
    .lifestyle-pro-blue input:hover[type="button"],
    .lifestyle-pro-blue input:hover[type="reset"],
    .lifestyle-pro-blue input:hover[type="submit"] {
    background-color: #eeeee8;
    }

    .lifestyle-pro-blue .nav-secondary {
    background-color: #80d2e5;
    }

    /* Lifestyle Pro Green
    --------------------------------------------- */

    .lifestyle-pro-green .archive-pagination li a:hover,
    .lifestyle-pro-green .archive-pagination li.active a,
    .lifestyle-pro-green .entry-title a:hover,
    .lifestyle-pro-green a {
    color: #84cc78;
    }

    .lifestyle-pro-green .button,
    .lifestyle-pro-green .genesis-nav-menu a,
    .lifestyle-pro-green .site-footer a,
    .lifestyle-pro-green .site-title a,
    .lifestyle-pro-green .site-title a:hover {
    color: #fff;
    }

    .lifestyle-pro-green .entry-title a,
    .lifestyle-pro-green .sidebar .widget-title a,
    .lifestyle-pro-green .site-footer a:hover,
    .lifestyle-pro-green a:hover {
    color: #222;
    }

    .lifestyle-pro-green .archive-pagination li a,
    .lifestyle-pro-green .genesis-nav-menu .current-menu-item > a,
    .lifestyle-pro-green .genesis-nav-menu .sub-menu a,
    .lifestyle-pro-green .nav-primary a {
    color: #7fe8e2;
    }

    .lifestyle-pro-green .button,
    .lifestyle-pro-green .entry-content .button,
    .lifestyle-pro-green .site-footer,
    .lifestyle-pro-green .site-header,
    .lifestyle-pro-green button,
    .lifestyle-pro-green input[type="button"],
    .lifestyle-pro-green input[type="reset"],
    .lifestyle-pro-green input[type="submit"],
    .lifestyle-pro-green.lifestyle-pro-home .content .widget-title {
    background-color: #84cc78;
    }

    .lifestyle-pro-green .button:hover,
    .lifestyle-pro-green .entry-content .button:hover,
    .lifestyle-pro-green button:hover,
    .lifestyle-pro-green input:hover[type="button"],
    .lifestyle-pro-green input:hover[type="reset"],
    .lifestyle-pro-green input:hover[type="submit"] {
    background-color: #eeeee8;
    }

    .lifestyle-pro-green .nav-secondary {
    background-color: #a2d49a;
    }

    /* Lifestyle Pro Mustard
    --------------------------------------------- */

    .lifestyle-pro-mustard .archive-pagination li a:hover,
    .lifestyle-pro-mustard .archive-pagination li.active a,
    .lifestyle-pro-mustard .entry-title a:hover,
    .lifestyle-pro-mustard a {
    color: #edce4a;
    }

    .lifestyle-pro-mustard .button,
    .lifestyle-pro-mustard .genesis-nav-menu a,
    .lifestyle-pro-mustard .site-footer a,
    .lifestyle-pro-mustard .site-title a,
    .lifestyle-pro-mustard .site-title a:hover {
    color: #fff;
    }

    .lifestyle-pro-mustard .entry-title a,
    .lifestyle-pro-mustard .sidebar .widget-title a,
    .lifestyle-pro-mustard .site-footer a:hover,
    .lifestyle-pro-mustard a:hover {
    color: #222;
    }

    .lifestyle-pro-mustard .archive-pagination li a,
    .lifestyle-pro-mustard .genesis-nav-menu .current-menu-item > a,
    .lifestyle-pro-mustard .genesis-nav-menu .sub-menu a,
    .lifestyle-pro-mustard .nav-primary a {
    color: #7fe8e2;
    }

    .lifestyle-pro-mustard .button,
    .lifestyle-pro-mustard .entry-content .button,
    .lifestyle-pro-mustard .site-footer,
    .lifestyle-pro-mustard .site-header,
    .lifestyle-pro-mustard button,
    .lifestyle-pro-mustard input[type="button"],
    .lifestyle-pro-mustard input[type="reset"],
    .lifestyle-pro-mustard input[type="submit"],
    .lifestyle-pro-mustard.lifestyle-pro-home .content .widget-title {
    background-color: #edce4a;
    }

    .lifestyle-pro-mustard .button:hover,
    .lifestyle-pro-mustard .entry-content .button:hover,
    .lifestyle-pro-mustard button:hover,
    .lifestyle-pro-mustard input:hover[type="button"],
    .lifestyle-pro-mustard input:hover[type="reset"],
    .lifestyle-pro-mustard input:hover[type="submit"] {
    background-color: #eeeee8;
    }

    .lifestyle-pro-mustard .nav-secondary {
    background-color: #f5d85a;
    }

    /* Lifestyle Pro Purple
    --------------------------------------------- */

    .lifestyle-pro-purple .archive-pagination li a:hover,
    .lifestyle-pro-purple .archive-pagination li.active a,
    .lifestyle-pro-purple .entry-title a:hover,
    .lifestyle-pro-purple a {
    color: #816689;
    }

    .lifestyle-pro-purple .button,
    .lifestyle-pro-purple .genesis-nav-menu a,
    .lifestyle-pro-purple .site-footer a,
    .lifestyle-pro-purple .site-title a,
    .lifestyle-pro-purple .site-title a:hover {
    color: #fff;
    }

    .lifestyle-pro-purple .entry-title a,
    .lifestyle-pro-purple .sidebar .widget-title a,
    .lifestyle-pro-purple .site-footer a:hover,
    .lifestyle-pro-purple a:hover {
    color: #222;
    }

    .lifestyle-pro-purple .archive-pagination li a,
    .lifestyle-pro-purple .genesis-nav-menu .current-menu-item > a,
    .lifestyle-pro-purple .genesis-nav-menu .sub-menu a,
    .lifestyle-pro-purple .nav-primary a {
    color: #7fe8e2;
    }

    .lifestyle-pro-purple .button,
    .lifestyle-pro-purple .entry-content .button,
    .lifestyle-pro-purple .site-footer,
    .lifestyle-pro-purple .site-header,
    .lifestyle-pro-purple button,
    .lifestyle-pro-purple input[type="button"],
    .lifestyle-pro-purple input[type="reset"],
    .lifestyle-pro-purple input[type="submit"],
    .lifestyle-pro-purple.lifestyle-pro-home .content .widget-title {
    background-color: #816689;
    }

    .lifestyle-pro-purple .button:hover,
    .lifestyle-pro-purple .entry-content .button:hover,
    .lifestyle-pro-purple button:hover,
    .lifestyle-pro-purple input:hover[type="button"],
    .lifestyle-pro-purple input:hover[type="reset"],
    .lifestyle-pro-purple input:hover[type="submit"] {
    background-color: #eeeee8;
    }

    .lifestyle-pro-purple .nav-secondary {
    background-color: #8e7197;
    }

    /* Lifestyle Pro Red
    --------------------------------------------- */

    .lifestyle-pro-red .archive-pagination li a:hover,
    .lifestyle-pro-red .archive-pagination li.active a,
    .lifestyle-pro-red .entry-title a:hover,
    .lifestyle-pro-red a {
    color: #e65e52;
    }

    .lifestyle-pro-red .button,
    .lifestyle-pro-red .genesis-nav-menu a,
    .lifestyle-pro-red .site-footer a,
    .lifestyle-pro-red .site-title a,
    .lifestyle-pro-red .site-title a:hover {
    color: #fff;
    }

    .lifestyle-pro-red .entry-title a,
    .lifestyle-pro-red .sidebar .widget-title a,
    .lifestyle-pro-red .site-footer a:hover,
    .lifestyle-pro-red a:hover {
    color: #222;
    }

    .lifestyle-pro-red .archive-pagination li a,
    .lifestyle-pro-red .genesis-nav-menu .current-menu-item > a,
    .lifestyle-pro-red .genesis-nav-menu .sub-menu a,
    .lifestyle-pro-red .nav-primary a {
    color: #a5a5a3;
    }

    .lifestyle-pro-red .button,
    .lifestyle-pro-red .entry-content .button,
    .lifestyle-pro-red .site-footer,
    .lifestyle-pro-red .site-header,
    .lifestyle-pro-red button,
    .lifestyle-pro-red input[type="button"],
    .lifestyle-pro-red input[type="reset"],
    .lifestyle-pro-red input[type="submit"],
    .lifestyle-pro-red.lifestyle-pro-home .content .widget-title {
    background-color: #e65e52;
    }

    .lifestyle-pro-red .button:hover,
    .lifestyle-pro-red .entry-content .button:hover,
    .lifestyle-pro-red button:hover,
    .lifestyle-pro-red input:hover[type="button"],
    .lifestyle-pro-red input:hover[type="reset"],
    .lifestyle-pro-red input:hover[type="submit"] {
    background-color: #eeeee8;
    }

    .lifestyle-pro-red .nav-secondary {
    background-color: #f2685c;
    }

    /*
    Media Queries
    ---------------------------------------------------------------------------------------------------- */


    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {

    .search-form input[type="search"] {
    background-image: url(images/[email protected]);
    }

    }


    @media
    only screen and (max-width: 1139px) {

    .footer-widgets,
    .site-container,
    .wrap {
    max-width: 960px;
    }

    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
    width: 688px;
    }

    .content {
    width: 580px;
    }

    .content-sidebar-sidebar .content,
    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content,
    .site-header .widget-area {
    width: 380px;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .home-bottom-left,
    .home-bottom-right,
    .sidebar-primary {
    width: 272px;
    }

    }


    @media
    only screen and (max-width: 1023px) {

    .footer-widgets,
    .site-container,
    .wrap {
    max-width: 772px;
    }

    .content-sidebar-sidebar .content-sidebar-wrap,
    .content-sidebar-sidebar .content,
    .content,
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content,
    .sidebar-primary,
    .sidebar-secondary,
    .sidebar-sidebar-content .content-sidebar-wrap,
    .sidebar-sidebar-content .content,
    .site-header .widget-area,
    .title-area {
    width: 100%;
    }

    .site-header {
    padding: 24px;
    padding: 2.4rem;
    }

    .header-image .site-title a {
    background-position: center !important;
    margin: 0 0 16px;
    margin: 0 0 1.6rem;
    }

    .genesis-nav-menu li,
    .site-header ul.genesis-nav-menu,
    .site-header .search-form {
    float: none;
    }

    .genesis-nav-menu,
    .site-description,
    .site-footer p,
    .site-header hgroup,
    .site-header .search-form,
    .site-title {
    text-align: center;
    }

    .genesis-nav-menu a {
    padding: 16px;
    padding: 1.6rem;
    }

    .site-header .widget-area {
    margin-top: 16px;
    margin-top: 1.6rem;
    }

    .site-header .search-form {
    margin: 16px auto ;
    margin: 1.6rem auto;
    }

    .genesis-nav-menu li.alignleft,
    .genesis-nav-menu li.right {
    display: none;
    }

    .entry-footer .entry-meta {
    margin: 0;
    padding-top: 12px;
    padding-top: 1.2rem;
    }

    .home-bottom-left,
    .home-bottom-right {
    width: 332px;
    }

    .footer-widgets-1 {
    margin: 0;
    }

    .site-footer {
    padding: 24px;
    padding: 2.4rem;
    }

    }


    @media
    only screen and (max-width: 767px) {

    body {
    font-size: 14px;
    font-size: 1.4rem;
    }

    .site-container {
    padding: 20px 5%;
    padding: 2rem 5%;
    width: 94%;
    }

    .five-sixths,
    .four-sixths,
    .home-bottom-left,
    .home-bottom-right,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fourths,
    .three-sixths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
    margin: 0;
    width: 100%;
    }

    .site-title {
    font-size: 32px;
    font-size: 3.2rem;
    }

    .header-image .site-title a {
    background-size: contain !important;
    }

    .genesis-nav-menu a,
    .nav-primary .sub-menu a {
    font-size: 12px;
    font-size: 1.2rem;
    padding: 12px;
    padding: 1.2rem;
    }

    .nav-secondary a,
    .nav-secondary .sub-menu a {
    font-size: 11px;
    font-size: 1.1rem;
    padding: 10px 8px;
    padding: 1rem 0.8rem;
    }

    .genesis-nav-menu .sub-menu .sub-menu {
    margin: -31px 0 0 199px;
    }

    .nav-primary .sub-menu .sub-menu {
    margin: -36px 0 0 199px;
    }

    .entry-meta .entry-tags {
    clear: both;
    float: left;
    }

    .entry-meta .entry-comments a {
    margin: 0 0 10px;
    margin: 0 0 1rem;
    }

    .lifestyle-pro-home .featuredpost .alignleft,
    .lifestyle-pro-home .featuredpost .alignright {
    float: none;
    margin: 0 auto;
    }

    }

    THANKS AGAIN!!!!!

    http://www.fitmama4life.com
    December 18, 2013 at 12:00 am #79889
    nutsandbolts
    Member

    You can make your header image responsive by changing your CSS for #site-header to this:

    .site-header {
    background: url(http://fitmama4life.com/wp-content/uploads/2013/12/HEADER2.png) no-repeat;
    background-size: contain !important;
    padding: 48px 50px 48px 48px;
    padding: 4.8rem 5rem 4.8rem 5rem;
    margin-left: 25px;
    overflow: hidden;
    min-height: 348px;
    }

    However, that will cause some spacing issues - the min-height will need to be changed on each media query size to avoid a huge gap between the header and navigation.

    Still looking re: the content area and why it's not resizing.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    April 22, 2014 at 11:51 am #101899
    wseo
    Member

    Hi Andrea. Using the code you entered above (replacing my header URL), I was able to make my header image responsive - thank you! BUT can you please explain in more detail about this comment: "the min-height will need to be changed on each media query size to avoid a huge gap between the header and navigation." I am having this exact issue. How and where do I enter that the min-height values (and what values do I enter)?

    The other thing that's happening is that any screen size below 768 is pushing the header to the top margin. I would love to retain the top margins there if possible.

    Any input would be appreciated! Thank you.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2026 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble