{"id":48398,"date":"2020-03-28T03:01:27","date_gmt":"2020-03-27T17:01:27","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48398"},"modified":"2020-03-28T11:56:50","modified_gmt":"2020-03-28T01:56:50","slug":"wordpress-css-iphone-portrait-few-pixels-less-width-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-css-iphone-portrait-few-pixels-less-width-tutorial\/","title":{"rendered":"WordPress CSS iPhone Portrait Few Pixels Less Width Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wpfpl.gif\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress CSS iPhone Portrait Few Pixels Less Width Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wpfpl.gif\" title=\"WordPress CSS iPhone Portrait Few Pixels Less Width Tutorial\"    \/><\/a><p class=\"wp-caption-text\">WordPress CSS iPhone Portrait Few Pixels Less Width Tutorial<\/p><\/div>\n<p>We&#8217;ve had months and months of annoyance with this WordPress Blog (TwentyTen themed) content display on our iPhone 7 only in Portrait mode.  The reason for our slothfulness on a fix was that the content width &#8220;deficit&#8221; wasn&#8217;t even a full character width too wide for the iPhone device width, and so for those months and months we put up with a combination of &#8230;<\/p>\n<ul>\n<li>&#8220;feather brained&#8221; pinch operations &#8230; and\/or &#8230;<\/li>\n<li>guessing last to right characters<\/li>\n<\/ul>\n<p> &#8230; until today, when we finally broached the CSS styling via WordPress Blog (TwentyTen themed) style.css stylesheet issue.<\/p>\n<p>We like CSS Stylesheet @media specific rules that can narrow down fixes to individual device type usage in (individual) orientations (even).  &#8220;Cute, huh?!&#8221; in the extremus!<\/p>\n<p>And so, what is the form of <font color=blue>fix<\/font> (augmenting <a title='WordPress CSS Rounded Shadowed Border Tutorial' href='#wpcssrsbt'>WordPress CSS Rounded Shadowed Border Tutorial<\/a> box-shadow work of the past) to this WordPress Blog&#8217;s Twenty Ten theme&#8217;s style.css stylesheet &#8230;<\/p>\n<p><code><br \/>\n.entry-content {<br \/>\npadding-left: 2px;<br \/>\nbox-shadow: 14px 14px 18px lightblue; \/* #C0C0C0; *\/<br \/>\n}<br \/>\n<br \/>\n<font color=blue><a target=_blank title='CSS @media rules information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_mediaquery.asp'>@media<\/a> only screen and (max-width: 479px) {<br \/>\n    \/* portrait mode *\/<br \/>\n#header {<br \/>\nwidth: calc(100% - 12px) !important;<br \/>\npadding-left: 20px !important;<br \/>\n}<br \/>\n#main {<br \/>\nwidth: <a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a>(100% - 12px) !important;<br \/>\n\/* padding-left: 20px !important; *\/<br \/>\n}<br \/>\n#content {<br \/>\nwidth: calc(100% - 12px) !important;<br \/>\nmargin-left: 22px !important;<br \/>\n}<br \/>\n#hrpresel {<br \/>\n\/* padding-left: 20px !important; *\/<br \/>\n}<br \/>\n.entry-title {<br \/>\n\/* padding-left: 20px !important; *\/<br \/>\n}<br \/>\n.nav-previous {<br \/>\n\/* padding-left: 20px !important; *\/<br \/>\n}<br \/>\n.entry-content {<br \/>\n\/* padding-left: 20px !important; *\/<br \/>\nwidth: calc(100% - 12px) !important;<br \/>\nbox-shadow: 14px 14px 18px lightgreen; \/* #C0C0C0; *\/<br \/>\n}<br \/>\n} <\/font><br \/>\n<\/code><\/p>\n<p> &#8230; and how did we get the information regarding &#8230;<\/p>\n<ol>\n<li>\n<table>\n<tr>\n<th>&#8220;CSS @media for iPhone portrait&#8221;? <br \/> Useful link, thanks &#8230;<\/th>\n<th>Via &#8230;<\/th>\n<\/tr>\n<tr>\n<td><a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/7290338\/media-queries-css-only-for-iphone-landscape'>Media Queries &#8211; CSS only for iPhone landscape<\/a><\/td>\n<td><a target=_blank title='Useful Google search, thanks' href='https:\/\/www.google.com\/search?q=media+css+portrait+iPhone&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=media+css+portrait+iPhone&#038;aqs=chrome..69i57j0l2.10919j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>media css portrait iPhone<\/a><\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>\n<table>\n<tr>\n<th>&#8220;Few Pixels Less Width&#8221;? <br \/> Useful link, thanks &#8230;<\/th>\n<th>Via &#8230;<\/th>\n<\/tr>\n<tr>\n<td><a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/2434602\/css-setting-width-height-as-percentage-minus-pixels'>CSS: Setting width\/height as Percentage minus pixels<\/a><\/td>\n<td><a target=_blank title='Useful Google search, thanks' href='https:\/\/www.google.com\/search?q=css+reduce+width+by+pixels&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=css+reduce+width+by&#038;aqs=chrome.0.0j69i57j0.9515j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>css reduce width by pixels<\/a><\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ol>\n<p>Maybe you are on an iPhone now in Portrait mode not squinting nor doing any &#8220;feather-brained&#8221; pinching &#8230; we hope so <font size=1>it&#8217;s so unbecoming<\/font>!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-css-iphone-portrait-few-pixels-less-width-tutorial\/'>WordPress CSS iPhone Portrait Few Pixels Less Width Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wpcssrsbt'>Previous relevant <a target=_blank title='WordPress CSS Rounded Shadowed Border Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-css-rounded-shadowed-border-tutorial\/'>WordPress CSS Rounded Shadowed Border Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wpcss.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress CSS Rounded Shadowed Border Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wpcss.jpg\" title=\"WordPress CSS Rounded Shadowed Border Tutorial\"    \/><\/a><p class=\"wp-caption-text\">WordPress CSS Rounded Shadowed Border Tutorial<\/p><\/div>\n<p>Today we wanted to show you some recent CSS work on this WordPress Blog.<\/p>\n<p>We&#8217;ve made some styling changes &#8230;<\/p>\n<ul>\n<li>rounded border (thanks to this <a target=_blank title='rounded border information link ... thanks' href='http:\/\/yourbusiness.azcentral.com\/customize-wordpress-widgets-rounded-corners-14229.html'>link<\/a> for good advice)<\/li>\n<li>box shadow (in two places) (thanks to this <a target=_blank title='box shadow information link from w3schools ... thanks' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp'>link<\/a> for good advice)<\/li>\n<li>padding-left increases (in two places)<\/li>\n<li>margin-bottom increases (in two places)<\/li>\n<li>margin-top increase<\/li>\n<\/ul>\n<p> &#8230; and hope some of the ideas might help you perhaps.  To get some context take a look at either or both of &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wpcss.jpg\" title='Click picture'>image<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/ITblog\/style.css--GETME\" title='style.css'>style.css<\/a> changes to make this happen<\/li>\n<\/ul>\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='#d15024' onclick='var dv=document.getElementById(\"d15024\"); 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='d15024' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d48398' onclick='var dv=document.getElementById(\"d48398\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/calc\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48398' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve had months and months of annoyance with this WordPress Blog (TwentyTen themed) content display on our iPhone 7 only in Portrait mode. The reason for our slothfulness on a fix was that the content width &#8220;deficit&#8221; wasn&#8217;t even a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-css-iphone-portrait-few-pixels-less-width-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":[151,2422,281,760,889,1918,2210,1209,1211,1319,1324,1325,2257,1456],"class_list":["post-48398","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-blog","tag-calc","tag-css","tag-media","tag-orientation","tag-pixel","tag-rule","tag-style","tag-stylesheet","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-width","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48398"}],"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=48398"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48398\/revisions"}],"predecessor-version":[{"id":48405,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48398\/revisions\/48405"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}