Design Tip – Metro Theme Header

[Susan]

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!

[wmwebdes]

Just what I needed Susan

Can't thank you enough.

[Susan]

You're welcome! 🙂

[Nat]

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

[Susan]

@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!

[Nat]

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?

[Susan]

@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.

[Author]

Posts