Support » Fixing WordPress » Nav Menu on iPhone/iPad for Twenty Eleven Child

  • Resolved kubegusa

    (@kubegusa)


    Hi, (sorry, I’m closing my previous post because I added a 2nd comment, and know that people might not look at new posts that already have a 2nd comment.. didn’t know how else to solve this so I opened a new post)

    I have this code in my Twenty eleven child style sheet and it seems to have no effect on how the site displays on iPhone. Any pointers would be much appreciated! Thanks.

    * ============================= */
    /* ! Layout for mobile version   */
    /* ============================= */
    @media handheld, only screen and (max-width: 767px) {
       #branding #access li {
          font-size: 14px;
          width: 50%;
          text-align: center;
      }
    } @media handheld, only screen and (max-width: 467px) {
       #branding #access li {
          font-size: 14px;
          width: 100%;
          text-align: center;
       }
    }

    Link is http://www.demaeyer-co.be/

Viewing 15 replies - 1 through 15 (of 17 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    To make sure the styles definitely have no effect, can you try adding a border of 10px solid and red to the two media queries?

    thanks, tried that, it’s on the sheet right now still
    and it doesn’t seem to have any effect.. so it must then not read the media query at all..? I wonder if there’s a typo in the first line
    it should light up blue in the notepad+ like the
    @import url("../twentyeleven/style.css");
    and it does not…
    @media handheld, only screen and (max-width: 767px) {

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Here’s an example Child Theme stylesheet http://codex.wordpress.org/Child_Themes#Example_of_a_basic_Child_Theme to make sure.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I can’t see your @media handheld queries within your Child Theme stylesheet http://www.demaeyer-co.be/wp-content/themes/DMAE/style.css

    thanks for taking the time to check, it was late in my time zone last night, so I’m following up now..
    the queries are at the bottom of the style sheet
    should they be at the beginning?

    I moved the queries to the top of the stylesheet, right after calling the main style sheet.. but also like this, I see no change on my iPhone..

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I think the issue is with the method you’re using to add the CSS.
    There is no CSS within your Child Theme’s stylesheet that uses @media handheld queries.

    I see what you mean. Strange though.. on FTP I have the same path as the link http://www.demaeyer-co.be/wp-content/themes/DMAE/style.css
    And when I open the css in my FTP client, i see the media queries on top of the css now, while when clicking on the link in browser, the media queries don’t show.. *scratching my head…

    Andrew, thank you! I realized I was using the wrong ftp path. Such a silly mistake and thank you so much for catching it. I now see the changes on my iPhone. Still not how it needs to be, as the site title and description are positioned too low on the page. But I’ll be playing with that.

    Ok, I have the correct FTP now but still, I don’t see any changes.. what am I missing? What error is there in my code..?

    @media handheld, only screen and (max-width: 767px) {
       #branding #access li {
          font-size: 14px;
          width: 50%;
          text-align: center;
    	  line-height: 12px;
      }
    
    #site-title a {
    	color: #044c72;
    	font-size: 14px;
    	font-weight: bold;
    	line-height: 12px;
    	text-decoration: none;
    	font-family: 'Verdana', sans-serif;
    	text-shadow: 1px 1px 3px #ffffff; /*shadow around site title*/
        /*filter: dropshadow(color=#ffffff, offx=2, offy=2);/*shadow around site title*/
    
    }
    #site-description {
    	color: #1087be;
    	font-size: 12px;
    	margin: 0 0 0 0;
    	font-weight: bold;
    	font-family: 'Verdana', sans-serif;
    	text-shadow: 1px 1px 3px #ffffff;/*shadow around site description*/
        /*filter: dropshadow(color=#ffffff, offx=2, offy=2);/*shadow around site description*/
    
    }
    }
    @media handheld, only screen and (max-width: 467px) {
       #branding #access li {
          font-size: 14px;
          width: 100%;
          text-align: center;
    	  line-height: 12px;
       }
       #site-title a {
    	color: #044c72;
    	font-size: 14px;
    	font-weight: bold;
    	line-height: 12px;
    	text-decoration: none;
    	font-family: 'Verdana', sans-serif;
    	text-shadow: 1px 1px 3px #ffffff; /*shadow around site title*/
        /*filter: dropshadow(color=#ffffff, offx=2, offy=2);/*shadow around site title*/
    }
    #site-description {
    	color: #1087be;
    	font-size: 12px;
    	margin: 0 0 0 0;
    	font-weight: bold;
    	font-family: 'Verdana', sans-serif;
    	text-shadow: 1px 1px 3px #ffffff;/*shadow around site description*/
        /*filter: dropshadow(color=#ffffff, offx=2, offy=2);/*shadow around site description*/
    
    }
    }
    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I haven’t figured out the solution, but can you move that CSS to the bottom of the file? The general rule is, the higher-up styles are in a stylesheet, the more likely those styles will be overridden. So, I’m just trying to narrow down the problem a bit.

    awesome.. and strange.. lol it worked! Thanks so much!

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    And thanks for contributing to the open-source community. If you resolve this thread, others are more likely to benefit from your solution. Thanks.

    My pleasure, I appreciate this community!

    I encountered the next block.. I have been searching for hrs to center the navigation menu for iPhone, but it doesn’t seem to move at all with the code I currently have. Any pointers would be much appreciated…

    @media handheld, only screen and (max-width: 467px) {
       #branding #access li {
          font-size: 14px;
          width: 100%;
          text-align: center;
    	  line-height: 6px;
    	  display:inline-block;
       }
    
    #site-title {
    
    	padding: 1em 0 0;
    	margin-right: 0;
    }
    
       #site-title a {
    	color: #044c72;
    	font-size: 16px;
    	font-weight: bold;
    	line-height: 12px;
    	text-decoration: none;
    	font-family: 'Verdana', sans-serif;
    	text-shadow: 1px 1px 3px #ffffff; /*shadow around site title*/
        /*filter: dropshadow(color=#ffffff, offx=2, offy=2);/*shadow around site title*/
    }
    #site-description {
    	color: #1087be;
    	font-size: 12px;
    	margin: 0 0 0 0;
    	font-weight: bold;
    	font-family: 'Verdana', sans-serif;
    	text-shadow: 1px 1px 3px #ffffff;/*shadow around site description*/
        /*filter: dropshadow(color=#ffffff, offx=2, offy=2);/*shadow around site description*/
    
    }
    
    #access div { margin: 0 0 0 0; }
    #access { text-align:center; }
    #access ul { display:inline-block; }
    }

    Ok found it. This is to center and position the navi menu for iPhone.

    #branding #access li {
          font-size: 12px;
    	  margin-top: 1.5em;}
Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Nav Menu on iPhone/iPad for Twenty Eleven Child’ is closed to new replies.