WordPress.org

Forums

[resolved] Nav Menu on iPhone/iPad for Twenty Eleven Child (18 posts)

  1. kubegusa
    Member
    Posted 2 years ago #

    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/

  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    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?

  3. kubegusa
    Member
    Posted 2 years ago #

    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) {

  4. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

  5. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

  6. kubegusa
    Member
    Posted 2 years ago #

    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?

  7. kubegusa
    Member
    Posted 2 years ago #

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

  8. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    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.

  9. kubegusa
    Member
    Posted 2 years ago #

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

  10. kubegusa
    Member
    Posted 2 years ago #

    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.

  11. kubegusa
    Member
    Posted 2 years ago #

    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*/
    
    }
    }
  12. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    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.

  13. kubegusa
    Member
    Posted 2 years ago #

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

  14. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

  15. kubegusa
    Member
    Posted 2 years ago #

    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; }
    }
  16. kubegusa
    Member
    Posted 2 years ago #

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

    #branding #access li {
          font-size: 12px;
    	  margin-top: 1.5em;}
  17. kubegusa
    Member
    Posted 2 years ago #

    solved

  18. kubegusa
    Member
    Posted 2 years ago #

    solved

Topic Closed

This topic has been closed to new replies.

About this Topic