Nav Menu on iPhone/iPad for Twenty Eleven Child

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

Here’s an example Child Theme stylesheet https://codex.www.ads-software.com/Child_Themes#Example_of_a_basic_Child_Theme to make sure.

I can’t see your @media handheld queries within your Child Theme stylesheet https://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..

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 https://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*/

}
}

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!

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;}