Cell phone display

  • Resolved nicolesage

    (@nicolesage)


    10 years, 11 months ago

    First, thank you for all your help thus far.

    For my clients site I’m building we edited the child’s theme quite a bit and it’s not translating well on other devices, like the iPhone. I can’t make their site live yet to show you but basically the navigation is stacked with a black border around it. Then Moved the navigation up to overlap the logo slightly. (Sounds hideous but it’s not all that bad).

    1. Is there a way to just have the iPhone screen size mimic what the website is doing since it’s not vertical nav? So to get rid of the drop down menu? Something weird is now happening with the spacing.

    2. If the above can’t be done is there something in my child theme code to change so the edits made to the site are not affecting the iPhone display of navigation? Below are the edits I placed in my child’s theme.

    /* Centered the main navigation, gave it a black border */
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    text-align: center;
    border: 3px solid #000;
    padding-left: 40px;
    width: 10%;
    font-family: Trebuchet MS,Helvetica, sans-serif;
    color: #000000;

    }

    /* 3.4.1 Site Header */
    /* Theme Options – Site Header Logo – this put logo on mobil version */
    #site-logo {
    display: inline;
    float: none;
    padding: 12px;
    padding: 0.857142857rem;
    }
    #site-title-wrapper {
    float: left;
    padding: 12px 0 24px 12px;
    padding: 0.857142857rem 0 1.714285714rem 0.857142857rem;
    }
    .site-header h1,
    .site-header h2 {
    text-align: left;
    }
    .site-header h1.menu-toggle {
    text-align: center;
    }

    /* Changing the widget titles color and size */
    .widget-title {
    font-size: 13px;
    font-size: .95rem;
    font-weight: bold;
    line-height: 1.2;
    text-transform: none;
    color: #000000;
    }

    /* Lessened the space between widget title and widget text */
    .widget-area .widget h3 {
    margin-bottom: 1px;
    margin-bottom: .1rem;
    }

    /* This somehow made navigation vertical */
    .main-navigation li {
    display: list-item;
    text-decoration: none;
    font-size: 15px;
    font-size: 1.071428571rem;

    }

    /* Moved the navigation box up to overlap logo */
    .main-navigation {
    margin-top: -32px;
    margin-top: -2.285714rem;

    }

    THANK YOU!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Main navigation in large form is described in media queries, starting at 12.0, so if you have any code that supposed to affect only normal navigation, you have to move it to appropriate media query.

    In the main part of the file (up to 12.x) menu code is primarily for the mobile view. Sort those things out and perhaps you will solve that problem.

    Thread Starter nicolesage

    (@nicolesage)

    Thank you for your quick response. I guess I’m still confused what to change or add to my child’s theme from the media queries. I tired doing something like:

    @media screen and (min-width:770px) {
    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    border-top: 3px solid #000;
    display: list-item;
    text-align: left;
    width: 10%;

    I guess I am just a little lost how I can make things change for the display on different media queries. Any help to get me going in the right direction would be greatly appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Cell phone display’ is closed to new replies.