Forum Replies Created
-
AuthorPosts
-
October 27, 2014 at 1:07 pm in reply to: how to create mobile responsive header lifestyle pro #129467lilyMember
These are my media queries & I apologize in advance for posting so much code here. @Braddalton I think I followed your tutorial but if I didn't please feel free to correct me. Thanks!
/* 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: 20px 0; } .site-header .title-area, .site-header .widget { padding: 0 20px; } .site-header .widget_nav_menu { padding: 0; } .header-image .site-title a { background-position: center !important; margin: 0 0 16px; margin: 0 0 1.6rem; } .site-header { padding: 0px; padding: 0rem; } .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, .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: 20px 16px; } .site-header .widget-area { margin-top: 16px; } .site-header .search-form { margin: 16px auto ; } .genesis-nav-menu li.alignleft, .genesis-nav-menu li.right { display: none; } .entry-footer .entry-meta { margin: 0; padding-top: 12px; } .home-bottom-left, .home-bottom-right { width: 332px; } .footer-widgets-1 { margin: 0; } .site-footer { padding: 20px; } } @media only screen and (max-width: 768px) { .header-image .site-title a { padding: 0; margin: 0; } .header-full-width.header-image .site-title a { background-position: 0; margin: 0; } .site-header { background-color: #fff; overflow: hidden; padding: 0; } .site-container { background-color: #FFFFFF; box-shadow: 0 0 5px #DDDDDD; margin: 0 auto; max-width: 1140px; overflow: hidden; padding: 0; } .site-inner { clear: both; padding: 0; } body { font-size: 14px; } .site-container { padding: 20px 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; } } .genesis-nav-menu.responsive-menu > .menu-item > .sub-menu, .genesis-nav-menu.responsive-menu { display: none; } .genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon { display: block; } .genesis-nav-menu.responsive-menu .menu-item { margin: 0; } .genesis-nav-menu.responsive-menu .menu-item:hover { position: static; } .genesis-nav-menu.responsive-menu li.current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover, .genesis-nav-menu.responsive-menu li a, .genesis-nav-menu.responsive-menu li a:hover { background: none; border: none; display: block; line-height: 1; padding: 20px; text-transform: none; } .genesis-nav-menu.responsive-menu .current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu a, .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .genesis-nav-menu.responsive-menu a:hover, .genesis-nav-menu.responsive-menu li:hover > a { color: #fff; } .genesis-nav-menu.responsive-menu .menu-item-has-children { cursor: pointer; } .genesis-nav-menu.responsive-menu > .menu-item-has-children > a { margin-right: 60px; } .genesis-nav-menu.responsive-menu > .menu-item-has-children:before { content: "\f140"; float: right; font: normal 20px/1 'dashicons'; height: 20px; padding: 16px 20px; right: 0; text-align: right; z-index: 9999; } .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { content: "\f142"; } .genesis-nav-menu.responsive-menu .sub-menu { background-color: rgba(0, 0, 0, 0.025); border: none; left: auto; opacity: 1; position: relative; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 100%; z-index: 99; } .genesis-nav-menu.responsive-menu .sub-menu .sub-menu { background-color: transparent; margin: 0; padding-left: 25px; } .genesis-nav-menu.responsive-menu > li:hover .sub-menu a:hover, .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .genesis-nav-menu.responsive-menu .sub-menu li a, .genesis-nav-menu.responsive-menu .sub-menu li a:hover { background: none; border: none; padding: 12px 20px; position: relative; text-transform: none; width: 100%; } .nav-primary .genesis-nav-menu.responsive-menu .current-menu-item > a, .nav-primary .genesis-nav-menu.responsive-menu .sub-menu a, .nav-primary .genesis-nav-menu.responsive-menu > li:hover .sub-menu a, .nav-primary .genesis-nav-menu.responsive-menu a:hover, .nav-primary .genesis-nav-menu.responsive-menu li:hover > a { color: #222; } .genesis-nav-menu a { font-size: 12px; } .entry-meta .entry-tags { clear: both; float: left; } .entry-meta .entry-comments a { margin: 0 0 10px; } .lifestyle-pro-home .featuredpost .alignleft, .lifestyle-pro-home .featuredpost .alignright { float: none; margin: 0 auto; } @media only screen and (max-width: 480px) { .header-image .site-title a { background: url(http://www.wonderfulhealthyhabits.com/wp-content/uploads/2014/10/julieg-header-4801.jpeg) no-repeat; max-height: 80px; width: 100%; } }
October 27, 2014 at 8:27 am in reply to: how to create mobile responsive header lifestyle pro #129435lilyMember@Ben thanks for the tips. That did not work either, though it did get rid of the duplicate header. Any other ideas? Could it be somewhere else in my code that i'm not looking?
@Braddalton - thank you so much for your tutorials! I did use them to create the full size header and get rid of the padding. The code above is not yours, because as I mentioned, I tried yours, then I tried the pixelista's, then I just started trying anything I could think of. And I am not a coder so I'm just pulling things out of the air.Your advice did help me to get rid of the double header the first time I did that. Thanks for that too. 🙂
lilyMember@nutsandbolts - when I used your code it created a header within the header. Basically both pictures stacked on top of each other, one 1/3 of the size of the other. Any advice on what I might have done wrong?
-
AuthorPosts