{"id":55440,"date":"2023-02-23T00:01:20","date_gmt":"2023-02-22T14:01:20","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-iphone-breadcrumbs-issue-tutorial\/"},"modified":"2023-02-22T21:08:22","modified_gmt":"2023-02-22T11:08:22","slug":"wordpress-blog-iphone-breadcrumbs-issue-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-iphone-breadcrumbs-issue-tutorial\/","title":{"rendered":"WordPress Blog iPhone Breadcrumbs Issue Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress_iphone_breadcrumbs.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"WordPress Blog iPhone Breadcrumbs Issue Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress_iphone_breadcrumbs.jpg\" title=\"WordPress Blog iPhone Breadcrumbs Issue Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">WordPress Blog iPhone Breadcrumbs Issue Tutorial<\/p><\/div>\n<p>Today&#8217;s WordPress Blog issue is device size specific, in our experience just affecting the (optional functionality) <a target=_blank title='Breadcrumb navigation information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Breadcrumb_navigation'>&#8220;breadcrumb&#8221;<\/a> links to blog postings before or after the current blog posting the user is reading, not showing them for this iPhone device widths.<\/p>\n<p>Given the circumstances here, we just want to start showing some part of the &#8220;breadcrumb&#8221; link (wording) content, and not insist on it being shown fully, which is a far better bet for those wider and higher devices and computers.   Counterintuitively, the CSS solution in the blog&#8217;s TwentyTen theme&#8217;s header.php increases those &#8220;breadcrumb&#8221; link font sizes, and various other CSS improved the situation, as shown in today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress_iphone_breadcrumbs.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n<br \/>\n@media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: portrait) {<br \/>\n.nav-previous a { z-index:187; font-size:24px; opacity:0.6; font-stretch:condensed; background-color:rgba(250,218,221,0.7);   }<br \/>\n.nav-next a { z-index:187; font-size:24px; opacity:0.6; font-stretch:condensed;  background-color:rgba(184,188,134,0.7);  }<br \/>\n}<br \/>\n<br \/>\n@media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: landscape) {<br \/>\n.nav-previous a { z-index:187; font-size:24px; opacity:0.6; font-stretch:condensed; background-color:rgba(250,218,221,0.7); }<br \/>\n.nav-next a { z-index:187; font-size:24px; opacity:0.6; font-stretch:condensed; background-color:rgba(184,188,134,0.7);  }<br \/>\n}<br \/>\n<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55440' onclick='var dv=document.getElementById(\"d55440\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55440' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s WordPress Blog issue is device size specific, in our experience just affecting the (optional functionality) &#8220;breadcrumb&#8221; links to blog postings before or after the current blog posting the user is reading, not showing them for this iPhone device widths. &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-iphone-breadcrumbs-issue-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[3113,151,1703,281,322,3453,3962,631,1807,705,795,830,932,997,1209,1212,1319,1456],"class_list":["post-55440","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-media-rule","tag-blog","tag-breadcrumbs","tag-css","tag-device","tag-font-size","tag-font-stretch","tag-iphone","tag-link","tag-links","tag-mobile","tag-navigation","tag-php","tag-programming","tag-style","tag-styling","tag-tutorial","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55440"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=55440"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55440\/revisions"}],"predecessor-version":[{"id":55444,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55440\/revisions\/55444"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}