How do you use full size header Lifestyle Pro??

Community Forums Forums Design Tips and Tricks How do you use full size header Lifestyle Pro??

This topic is: not resolved

This topic contains 33 replies, has 6 voices, and was last updated by  Bargnchk 5 days, 11 hours ago.

Viewing 15 posts - 16 through 30 (of 34 total)
  • Author
    Posts
  • #68015

    braddalton
    Participant
    Post count: 9287

    This is the modifed CSS for the Media Queries i tested:
    [css]
    @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,
    .title-area {
    width: 100%;
    }

    .site-header {
    padding: 0;
    padding: 0;
    }

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

    .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: 44px;
    font-size: 4.4rem;
    }

    .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;
    }

    }
    [/css]


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #68089

    SteveDub
    Participant
    Post count: 18

    Thanks Brad,

    Sorry are you saying I need to completely replace the ‘Media Queries’? also what are the links that are included, I take it I’m not copying these?

    Sorry to ask but I’m a little rusty with code! I did copy and paste but wasn’t sure which padding to adjust. It looks fine without doing this change on both my PC monitors, which I thought I had solved it through help here. Sam’s (above) works fine and I followed the same instructions someone gave to her, so not sure what I’ve done different?

    Thanks again for your time,
    Steve

    #68390

    braddalton
    Participant
    Post count: 9287

    Its an example of what i used locally to for testing. You can compare it to your existing code and make the changes in your own files.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #68596

    SteveDub
    Participant
    Post count: 18

    Thanks Brad, If I’m being honest I’m struggling a little to get my head around this. As I’m so early on in the design process I’m going to start from scratch and start the above tutorial again, maybe I went wrong somewhere?! Like I said it seems Sam did exactly this and her site renders fine on an iPad and Moble device.

    Thanks again,
    Steve

    #68603

    braddalton
    Participant
    Post count: 9287

    It depends on how you want it to look on different sized devices and what size your image is.

    Different people want it to look differently on different sized devices so its impossible to cover all bases.

    The Media Queries will need to be modified according to how you want it to look.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #68812

    SteveDub
    Participant
    Post count: 18

    Brad I’ve swapped out my media queries code for the one you posted up and although it fills the space on iPad & iPhone properly it’s still not showing the whole image..So I have put back to the original (padding visible on mobile devices) just for the moment to keep the code as clean as possible. Do I need to make different size images for these types of devices as well as the original 1140×200??

    ALSO although it now looks better on PC monitors it’s still chopping off a bit from the edges of my Header image?

    I’m really sorry to keep asking Brad but I just can’t get my head around what I’m doing different to Sam, as hers seems to look fine on both iPhone & iPad and she seems to have followed the same instructions without playing with the Media Queries??

    Thanks for your patience!
    Steve

    #68814

    SteveDub
    Participant
    Post count: 18

    …Sorry here’s the link (it’s just a test header image atm @ 1140x200px) and not necessarily the colour scheme I’m going to use FYI.

    gamerbundles.co.uk

    • This reply was modified 10 months ago by  SteveDub.
    • This reply was modified 10 months ago by  SteveDub.
    • This reply was modified 10 months ago by  SteveDub.
    • This reply was modified 10 months ago by  SteveDub.
    #68818

    braddalton
    Participant
    Post count: 9287

    I would need to spend some time and play around with it locally to work out the best solution.

    I can only really point you in the right direction because different people like different parts of their sites to look differently on different sized devices, Plus not everyone has the same customization and coding so its not like one solution works for everyone.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #68822

    SteveDub
    Participant
    Post count: 18

    Totally understand that Brad and I wasn’t expecting any more than the great advice and help you have already given or here. It’s just really frustrating as I follwed the tut above as did Sam and made an image 1140×200 and hers looks fine on all my devices x4 different size screens in total!

    Oh well I’ll work something out eventually.

    Thanks so much for your support,
    Steve

    #69742

    braddalton
    Participant
    Post count: 9287

    Published a new post that you may be interested in http://wpsites.net/web-design/customize-mobile-responsiveness-of-lifestyle-pro-theme-header/


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #69770

    SteveDub
    Participant
    Post count: 18

    Thanks Brad I did see this on facebook! I have started playing around with different sizes etc and using help from your posts.. I will get there eventually, otherwise I will just hire someone to sort it for me lol!

    It’s been a while since I’ve done anything like this and now there’s obviously so many devices to view websites on, I’m trying to get this right so I don’t lose visitors when the sites fully live.

    I’ve now checked these different changes on a 19″ & 23″ monitors my netbook and an iPad and the header responds differently on all of these, mostly chopping off part of it.

    Thanks,
    Steve

    #69894

    SteveDub
    Participant
    Post count: 18

    …and I’ve just realised the reason Sam’s is working on all platforms is because I don’t think she is using the same Child Theme anymore! As her original screenshot shows Lifestyle Pro, whereas the link now looks like a completely different site.

    Steve

    #69897

    Alex
    Participant
    Post count: 9

    Hey there – sorry to interject, but I’m having a similar problem.

    On this site I’ve set a full-sized header but it doesn’t behave responsively.

    I’ve been trying to make it work, and it is better than vanilla, but still doesn’t behave properly.

    Any help is appreciated.


    #69900

    SteveDub
    Participant
    Post count: 18

    Seems like you’re having the same issue Alex! If you have tried everything in the above post including most recent link, then we are probably at the same point!?

    I have reset mine back to original for now until I know whether I need to design different sizes or something! I just want the original to re-size for multiple screens, I think this may be the same for you.

    Steve

    #69968

    Alex
    Participant
    Post count: 9

    Hey buddy, I took a nap and figured it out. Why it works – I don’t know, but I’m not touching it.

    Check out this guys guide:

    http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

    This is what worked for me:

    In functions.php have:

    //* Remove the header right widget area
    unregister_sidebar( 'header-right' );
    
    /**
    * Filter the genesis_seo_site_title function to use an image for the logo instead of a background image
    *
    * The genesis_seo_site_title function is located in genesis/lib/structure/header.php
    * @link http://blackhillswebworks.com/?p=4144
    *
    */
     
    add_filter( 'genesis_seo_title', 'bhww_filter_genesis_seo_site_title', 10, 2 );
     
    function bhww_filter_genesis_seo_site_title( $title, $inside ){
    $child_inside = sprintf( '<a href="%s" title="%s"><img src="'. get_stylesheet_directory_uri() .'/images/dhead.png" title="%s" alt="%s"/></a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), esc_attr( get_bloginfo( 'name' ) ), esc_attr( get_bloginfo( 'name' ) ) );
    $title = str_replace( $inside, $child_inside, $title );
    return $title;
    } // End bhww_filter_genesis_seo_site_title
    
    /**
    * Remove the site description
    *
    * @link http://www.briangardner.com/code/remove-header-elements/
    */
    remove_action( 'genesis_site_description', 'genesis_seo_site_description' );
    
    //* Add support for custom header
    add_theme_support( 'custom-header', array(
    	'header-selector' => '.site-title a',
    	'height'          => 150,
    	'width'           => 1140,
    ) );
    

    Also, that guide says to delete the custom header – but doing so hid the header on my site so I have to have custom header but then select “no header” in the header selection menu.


Viewing 15 posts - 16 through 30 (of 34 total)

You must be logged in to reply to this topic.