Executive mobile display problem

[Tim Squires]

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

---

timsquires.com.au

http://timsquires.com.au/executive

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Tim Squires]

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--*/
}

---

timsquires.com.au

[Tim Squires]

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 🙂

---

timsquires.com.au

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Tim Squires]

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

---

timsquires.com.au

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Tim Squires]

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.

---

timsquires.com.au

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Tim Squires]

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

---

timsquires.com.au

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Tim Squires]

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

---

timsquires.com.au

[Author]

Posts