Design Tip – Metro Theme Header

Community Forums Forums Design Tips and Tricks Design Tip – Metro Theme Header

This topic is: not a support question

This topic contains 6 replies, has 3 voices, and was last updated by  Susan 1 year, 7 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #23715

    Susan
    Moderator
    Post count: 9255

    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:

    [css]

    #title a {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    }
    [/css]

    I would add it inside this media query:

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

    This worked like a charm!


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #23717

    wmwebdes
    Participant
    Post count: 107

    Just what I needed Susan

    Can’t thank you enough.

    #23718

    Susan
    Moderator
    Post count: 9255

    You’re welcome! :)


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #25295

    Nat
    Participant
    Post count: 10

    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

    #25297

    Susan
    Moderator
    Post count: 9255

    @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 offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #25299

    Nat
    Participant
    Post count: 10

    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?

    #25346

    Susan
    Moderator
    Post count: 9255

    @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 offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

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

You must be logged in to reply to this topic.