Executive mobile display problem

Community Forums Forums Design Tips and Tricks Executive mobile display problem

This topic is: not resolved

This topic contains 11 replies, has 2 voices, and was last updated by  Tim Squires 5 months, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #68170

    Tim Squires
    Participant
    Post count: 66

    Hello, I have increased the size of the logo on my Executive theme test site by adjusting the values in functions.php and making the necessary changes to the CSS.

    It looks perfect on my desktop, but when I check it on my iPhone, the logo isn’t resizing and part of it is being cut off.

    I also decreased the width of my nav bar to make it fit with the larger logo, but now on mobile display there is a huge gap between the logo and the nav bar.

    How can I adjust the responsive mobile version to display properly?

    Many thanks,
    Tim

    http://timsquires.com.au/executive

    http://timsquires.com.au/executive
    #68354

    nutsandbolts
    Moderator
    Post count: 2615

    Hi Tim,

    Look in your stylesheet for .site-title a and trying adding background size: contain; to see if that helps your logo on mobile. If you uploaded the logo using Appearance > Header we may need to do something different, so let me know if that’s the case.

    Once your logo resizes, that should also take care of the nav bar spacing as well.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #68379

    Tim Squires
    Participant
    Post count: 66

    Thanks Andrea, I did upload the logo via Appearance > Header – does that complicate things?

    I tried adding the code anyway, to see if it had any effect, but no luck :(

    Does this look right? Or should I try another way of adding the logo instead of Appearance > Header?

    Many thanks :)

    .site-title a,
    .site-title a:hover {
    	color: #222;
    	display: block;
    	padding: 28px 0 0;
    	padding: 2.8rem 0 0;
    	text-decoration: none;
            background size: contain; /*--added in--*/
    }
    #68380

    Tim Squires
    Participant
    Post count: 66

    UPDATE: I just amended that code snippet to contain a hyphen, ie:

    background-size: contain

    … it seems to have worked! Brilliant – thanks so much – but the extra space between the logo and the nav bar remains. Any ideas?
    Thanks again :)

    #68451

    nutsandbolts
    Moderator
    Post count: 2615

    Sorry about that, Tim. I should know better than to answer forum questions that late at night! I’m not able to get your site to load at the moment, but I’ll try to remember to check again in a bit to see what’s up with the spacing.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #68487

    Tim Squires
    Participant
    Post count: 66

    Np problem at all, Andrea – I really appreciate your help, and having the logo resizing correctly is a great start.

    #68525

    nutsandbolts
    Moderator
    Post count: 2615

    Just noticed this in your stylesheet:

    .site-header .widget {
    padding: 28px 0 0;
    padding: 2.8rem 0 0;
    margin-top: 3rem;
    }

    That’s where all your space is coming from, especially the rem values.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #68584

    Tim Squires
    Participant
    Post count: 66

    Thanks Andrea – After I changed the size of the logo I had trouble getting the nav bar to display correctly. I added “margin-top: 3rem” to move the nav bar back into its original position. That worked on my desktop, but didn’t work on the iPhone.

    I have now commented that line of code back out again, and that causes the nav bar display too high on my desktop. But even with the code now gone, the extra space remains on the mobile version.

    I’m very confused :)

    Thanks again for your help.

    #68601

    nutsandbolts
    Moderator
    Post count: 2615

    I would add that line back in, but in your responsive CSS section for phones, you can put in new rules for .site-header .widget to use a zero top margin.

    Personally, I don’t think the spacing looks bad at all, but I guess it just depends on how you want it to look.



    Andrea Whitmer, Owner, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #68680

    Tim Squires
    Participant
    Post count: 66

    Thanks Andrea, I tried that, but again, no luck sadly. Here is the area that I pasted the code into – does it look as though it should work?

    @media only screen and (max-width: 270px) {
    
        .header-image .site-title a {
            background-size: contain !important;
        }
    
        .site-title {
            font-size: 26px;
            font-size: 2.6rem;
        }
    
        .site-header .widget {
            margin-top: 0px;
        }
    
    }

    I would like that space to go if possible, but you must be getting tired of this – I’ll understand if you are too busy to keep helping :) You’ve provided a lot of time and I’m a lot further advanced than I would have been without your help. I really appreciate that – Thanks

    #68858

    nutsandbolts
    Moderator
    Post count: 2615

    What is the next size up in your media queries? An iPhone is 320px wide in portrait and 568px wide in landscape, so you might try that in some of the larger areas as well.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #69002

    Tim Squires
    Participant
    Post count: 66

    Brilliant – thanks so much. I should have realised that the size was wrong. I have been able to make the adjustment and it looks fine now in both portrait and landscape.

    Thanks for your help and patience in solving this problem, I have really appreciated it :)

    Tim

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.