Design Tip – Metro Theme Header

[SusanModerator Post count: 3186]

I recently set up my site using the Metro Theme. It looked great, but when I added it to the showcase/feedback forum, someone pointed out that my header was cut in two on an iPhone.  So, I submitted a ticket, and here is the response which I received, if anyone else is having the same issue:

In the mobile responsive section, you can add the following css:

#title a {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}

I would add it inside this media query:

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

This worked like a charm!

---

Susan @ Graphically Designing I’d love to customize your website! I tweet!
I’ve taken up the challenge! – help me answer some of the unanswered posts

[wmwebdesParticipant Post count: 95]

Just what I needed Susan

Can’t thank you enough.

[SusanModerator Post count: 3186]

You’re welcome!

---

Susan @ Graphically Designing I’d love to customize your website! I tweet!
I’ve taken up the challenge! – help me answer some of the unanswered posts

[NatParticipant Post count: 7]

Hi Susan, what do you mean by adding it inside?

I put it in between the two brackets at the end and it made no difference

[SusanModerator Post count: 3186]

@Nat, here is how it looks in the stylesheet on my site:

/* iPhones (portrait and landscape) ———– */

@media only screen and (max-width: 480px) {
#title a {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
}

I hope that helps!

---

Susan @ Graphically Designing I’d love to customize your website! I tweet!
I’ve taken up the challenge! – help me answer some of the unanswered posts

[NatParticipant Post count: 7]

Thanks Susan, I have a bigger problem now though. Was trying to change it and now all the font size has changed and I can not put in the middle right widgets. They keep moving to the left

@media only screen and (max-width: 480px) {
}
html {
font-size: 87.5%; /* 14px base */
}

Is it something to do with the font size you think?

[SusanModerator Post count: 3186]

@Nat – I don’t believe the change you made should affect the middle right widgets. I recommend putting in a support ticket explaining your issue – the code I added to mine was the result of me submitting my own support ticket.

---

Susan @ Graphically Designing I’d love to customize your website! I tweet!
I’ve taken up the challenge! – help me answer some of the unanswered posts

[Author]

Posts