{"id":67288,"date":"2025-03-08T03:01:00","date_gmt":"2025-03-07T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=67288"},"modified":"2025-03-06T18:04:43","modified_gmt":"2025-03-06T08:04:43","slug":"viewport-and-css-calc-screen-resize-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-screen-resize-tutorial\/","title":{"rendered":"Viewport and CSS Calc Screen Resize Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Viewport and CSS Calc Screen Resize Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc_screen_resize.gif\" title=\"Viewport and CSS Calc Screen Resize Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Viewport and CSS Calc Screen Resize Tutorial<\/p><\/div>\n<p>As well as the &#8230;<\/p>\n<ul>\n<li>intersection resizing concerns of <a title='Viewport and CSS Calc Intersection Resize Tutorial' href='#vcsscirt'>Viewport and CSS Calc Intersection Resize Tutorial<\/a> &#8230; there is also &#8230;<\/li>\n<li>screen resizing to consider &#8230; like with the recent <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-emoji-menu-screen-resize-tutorial\/' title='WordPress Emoji Menu Screen Resize Tutorial' rel=\"noopener\">WordPress Emoji Menu Screen Resize Tutorial<\/a> heads up regarding how to approach the issue<\/li>\n<\/ul>\n<p>As with that previous blog posting, when &#8230;<\/p>\n<ul>\n<li>a web browser screen resizes &#8230; the best place to intervene is, a little counterintuitively &#8230;<\/li>\n<li>the document.body <i>onresize<\/i> event<\/li>\n<\/ul>\n<p> &#8230; and rather than bothering trying to stay with the same webpage incarnation here, because the webpage content is static, all we need to do to cater for <font color=blue>screen resizing<\/font> here, in the code, is to &#8230;<\/p>\n<p><code><br \/>\n&lt;body <font color=blue>onresize='setTimeout(function(){ location.href=document.URL;  }, 3000);' <\/font>onload='dbih=document.body.innerHTML; divpolys();' onresize='if (!rdone) { rdone=true; setTimeout(reloadit, 50); divpolys(); } else { divpolys(); }'&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; the delay being so the user can complete their final resizing so that the <i>onresize<\/i> event number of calls is minimized, in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html---GETME\" title=\"viewport_poc.htm\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html---GETME\" title=\"viewport_poc.htm\" rel=\"noopener\">viewport_poc.htm<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.htm\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link.<\/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\/viewport-and-css-calc-screen-resize-tutorial\/' rel=\"noopener\">Viewport and CSS Calc Screen Resize Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vcsscirt'>Previous relevant <a target=\"_blank\" title='Viewport and CSS Calc Intersection Resize Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-intersection-resize-tutorial\/' rel=\"noopener\">Viewport and CSS Calc Intersection Resize Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Viewport and CSS Calc Intersection Resize Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc_resize.jpg\" title=\"Viewport and CSS Calc Intersection Resize Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Viewport and CSS Calc Intersection Resize Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Viewport and CSS Calc Intersection Algorithm Tutorial' href='#vcssciat'>Viewport and CSS Calc Intersection Algorithm Tutorial<\/a> showed no issues with &#8230;<\/p>\n<ul>\n<li>mobile &#8220;pinch&#8221; and &#8220;spread&#8221; gestures &#8230; no issues surprisingly &#8230; but there were with &#8230;<\/li>\n<li>non-mobile <a target=\"_blank\" title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp' rel=\"noopener\">&#8220;onresize&#8221;<\/a> (of window) created issue of a misplaced yellow intersection HTML div<\/li>\n<\/ul>\n<p>Fixing this bug was interesting.  At first we thought that yesterday&#8217;s &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-intersection-algorithm-tutorial\/'><p>\n &#8230; we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in px specified) to represent the intersection of Polygon 5 and 6.\n<\/p><\/blockquote>\n<p> &#8230; should be arranged to be &#8230;<\/p>\n<p><code><br \/>\n ... we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in % specified) to represent the intersection of Polygon 5 and 6.<br \/>\n<\/code><\/p>\n<p> &#8230; but found that that (idea that &#8220;W% = (WpxValue * 100.0 \/ screen.width)&#8221;) was not really the silver bullet here.<\/p>\n<p>What was better was to create a bit of a &#8220;rubber band&#8221; feel (for 1\/20 of a second of flexibility) to <b>onresize<\/b> events as per &#8230;<\/p>\n<p><code><br \/>\n\/\/ HTML<br \/>\n&lt;body onload='dbih=document.body.innerHTML; divpolys();'<b> onresize='if (!rdone) { rdone=true; setTimeout(reloadit, 50); divpolys(); } else { divpolys(); }'<\/b>&gt;<br \/>\n\/\/ Javascript<br \/>\nvar rdone=false;<br \/>\nfunction reloadit() {<br \/>\n   location.href=document.URL;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Yet again, take a look at <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html--GETME\" title=\"viewport_poc.htm\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html--GETME\" title=\"viewport_poc.htm\" rel=\"noopener\">viewport_poc.htm<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.htm\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link &#8230;<\/p>\n<table style='width:100%'>\n<tr>\n<th><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.htm\" title=\"Click picture\" rel=\"noopener\">Now<\/a><\/th>\n<\/tr>\n<tr>\n<td><iframe src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.htm\" style=\"width:100%;height:800px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html\" title=\"Click picture\" rel=\"noopener\">Was<\/a><\/th>\n<\/tr>\n<tr>\n<td><iframe src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" style=\"width:100%;height:800px;\"><\/iframe><\/td>\n<\/table>\n<hr>\n<p id='vcssciat'>Previous relevant <a target=\"_blank\" title='Viewport and CSS Calc Intersection Algorithm Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-intersection-algorithm-tutorial\/' rel=\"noopener\">Viewport and CSS Calc Intersection Algorithm Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Viewport and CSS Calc Intersection Algorithm Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc_intersection.jpg\" title=\"Viewport and CSS Calc Intersection Algorithm Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Viewport and CSS Calc Intersection Algorithm Tutorial<\/p><\/div>\n<p>Do you eat &#8220;separatist style&#8221;?  I used to, leaving the good stuff until last, until one day a grandparent kindly taught me the weakness with this system, quietly pinching the best stuff during the prelude period.  The recent <a title='Viewport and CSS Calc Primer Tutorial' href='#vcsscpt'>Viewport and CSS Calc Primer Tutorial<\/a> has set us on a &#8220;separatist course&#8221; (<font size=1>which we hope does not lead to any tears at bedtime<\/font>) &#8230;<\/p>\n<ul>\n<li>initially talking just HTML and CSS (and no Javascript) with that first incarnation of the &#8220;Viewport and CSS Calc&#8221; proof of concept web application as above &#8230; and now today &#8230;<\/li>\n<li>we add Javascript (that dynamically creates its own HTML and CSS via two conduit helpers &#8230; those being &#8230;\n<ol>\n<li>\n<code><br \/>\n&lt;body<b> onload='divpolys();'<\/b>&gt;<br \/>\n<\/code>\n<\/li>\n<li>\n<code><br \/>\nfunction divpolys() {<br \/>\n  var divsii;<br \/>\n  divs=document.getElementsByTagName('div');<br \/>\n  for (var ii=0; ii&lt;divs.length; ii++) {<br \/>\n    <b>divsii=divs[ii].getBoundingClientRect();     \/\/ the way CSS proportionate styling can become co-ordinate reality<\/b><br \/>\n    \/\/ co-ordinate finding processing continues<br \/>\n  }<br \/>\n  \/\/ More work here<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; helping us show, in another &#8220;proof of concept&#8221; that will get nuanced and genericized (we hope) to show &#8220;Two Convex Polygon Intersections&#8221;)\n<\/li>\n<\/ul>\n<p>&#8220;Nuanced and genericized&#8221;?  Yes, as our case is even simpler (because in our case the polygons are always rectangles) than the premise of our muse for today&#8217;s work, the wonderful algorithmic ideas for <a target=\"_blank\" href='https:\/\/www.swtestacademy.com\/intersection-convex-polygons-algorithm\/' title='Intersection of Convex Polygons Algorithm' rel=\"noopener\">Intersection of Convex Polygons Algorithm<\/a> (and also helped out by the great <a target=\"_blank\" href='https:\/\/wrf.ecse.rpi.edu\/\/Research\/Short_Notes\/pnpoly.html' title='PNPOLY - Point Inclusion in Polygon Test' rel=\"noopener\">PNPOLY &#8211; Point Inclusion in Polygon Test<\/a>) but we plump for an array of structures data arrangement (rather than classes) reminiscent of our book web application discussion at <a target=\"_blank\" title='Javascript Array of Structures Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-array-of-structures-primer-tutorial\/' rel=\"noopener\">Javascript Array of Structures Primer Tutorial<\/a> (and also see <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mysql-polygon-spatial-relations-via-image-map-tutorial\/' title='MySql Polygon Spatial Relations via Image Map Tutorial' rel=\"noopener\">MySql Polygon Spatial Relations via Image Map Tutorial<\/a> for GIS MySql Spatial functions regarding some of this same line of thinking).  And so, being that simple, we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in px specified) to represent the intersection of Polygon 5 and 6.<\/p>\n<p>Again, take a look at <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html-GETME\" title=\"viewport_poc.html\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html-GETME\" title=\"viewport_poc.html\" rel=\"noopener\">viewport_poc.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p> &#8230; or HTML iframe supervision to see what we are getting at here.<\/p>\n<hr>\n<p id='vcsscpt'>Previous relevant <a target=\"_blank\" title='Viewport and CSS Calc Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-primer-tutorial\/' rel=\"noopener\">Viewport and CSS Calc Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Viewport and CSS Calc Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.jpg\" title=\"Viewport and CSS Calc Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Viewport and CSS Calc Primer Tutorial<\/p><\/div>\n<p>Keeping on with some themes of yesterday&#8217;s <a title='Responsive Design Viewport Width Considerations Tutorial' href='#rdvwct'>Responsive Design Viewport Width Considerations Tutorial<\/a>, today, we combine ideas around &#8230;<\/p>\n<ul>\n<li>(meta) <a target=\"_blank\" title='Responsive Web Design' href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp' rel=\"noopener\">viewport<\/a> &#8230; and &#8230;<\/li>\n<li>(CSS) <a target=\"_blank\" title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html' rel=\"noopener\">calc<\/a><\/li>\n<\/ul>\n<p> &#8230; in a &#8220;proof of concept&#8221; web application we are using to explore ideas from the ground up <font size=1> &#8230; hello, wormies!<\/font><\/p>\n<p>This is <b>p<\/b>recise <b>p<\/b>ixel <b>p<\/b>lacement 101, bringing us to a division of concept with webpage design &#8230;<\/p>\n<table style=width:100%>\n<tr>\n<th><\/th>\n<th>Screen<\/th>\n<th>Viewport<\/th>\n<\/tr>\n<tr>\n<td>Width and Height Unitary Units<\/td>\n<td>px<\/td>\n<td>px<\/td>\n<\/tr>\n<tr>\n<td>Width Proportionate Units<\/td>\n<td>%<\/td>\n<td>vx<\/td>\n<\/tr>\n<tr>\n<td>Height Proportionate Units<\/td>\n<td>%<\/td>\n<td>vh<\/td>\n<\/tr>\n<tr>\n<td>Width (or Left) Calc-friendly<\/td>\n<td>%,px<\/td>\n<td>%,px,100vx<\/td>\n<\/tr>\n<tr>\n<td>Height (or Top) Calc-friendly<\/td>\n<td>%,px<\/td>\n<td>%,px,vh,100vh<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; where our &#8220;proof of concept&#8221; findings (on Safari, Firefox, Chrome, Opera and Safari simulations of Edge and Internet Explorer) so far make us believe the Viewport <i>width: calc(100vx &#8211; 60px);<\/i> CSS definition type of syntax that sounds great on paper does not appear to work in practice.<\/p>\n<p>So take a look at our very symmetric <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html_GETME\" title=\"viewport_poc.html\" rel=\"noopener\">viewport_poc.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p> &#8230; or HTML iframe supervision to see what we are getting at here.<\/p>\n<hr>\n<p id='rdvwct'>Previous relevant <a target=\"_blank\" title='Responsive Design Viewport Width Considerations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-design-viewport-width-considerations-tutorial\/' rel=\"noopener\">Responsive Design Viewport Width Considerations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Responsive Design Viewport Width Considerations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/responsive_design_viewport_width.jpg\" title=\"Responsive Design Viewport Width Considerations Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Design Viewport Width Considerations Tutorial<\/p><\/div>\n<p>Regarding our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\" title=\"Click picture\" rel=\"noopener\">Landing Page<\/a> series of HTML\/Javascript\/CSS webpages here at RJM Programming, we&#8217;re streamlining our device width (<a target=\"_blank\" title='Responsive Web Design' href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp' rel=\"noopener\">Responsive Web Design<\/a>) considerations of &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-friendly-meta-viewport-tag-zoom-tutorial\/' rel=\"noopener\">Mobile Friendly Meta Viewport Tag Zoom Tutorial<\/a> by now going with &#8230;<br \/>\n<table>\n<tr>\n<th>Was ..<\/th>\n<th><b>Now is<\/b> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n&lt;meta id=\u201dmyviewport\u201d name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes\u201d \/&gt;<br \/>\n<\/code>\n<\/td>\n<td>\n<code><br \/>\n<b>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/b><br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-pagespeed-and-firebug-mobile-friendly-primer-tutorial\/' title='Google PageSpeed and Firebug Mobile Friendly Primer Tutorial' rel=\"noopener\">Google PageSpeed and Firebug Mobile Friendly Primer Tutorial<\/a> by now going with &#8230;<br \/>\n<table>\n<tr>\n<th>Was ..<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction widthfix() {  \/\/<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th><b>Now is<\/b> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction widthfix() {  \/\/<br \/>\n if (<b>1 == 7 && <\/b>navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p>Why?<\/p>\n<ul>\n<li>viewport advice of W3School&#8217;s <a target=\"_blank\" href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp' title='Responsive Web Design - The Viewport' rel=\"noopener\">Responsive Web Design &#8211; The Viewport<\/a> useful link, thanks &#8230; to keep it simple &#8230;<br \/>\n<code><br \/>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<br \/>\n<\/code>\n<\/li>\n<li>we were able to use Safari (web browser) Develop Menu &#8220;Responsive Design Mode&#8221; functionality (as per <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/safari-develop-menu-responsive-design-primer-tutorial\/' title='Safari Develop Menu Responsive Design Primer Tutorial' rel=\"noopener\">Safari Develop Menu Responsive Design Primer Tutorial<\/a>) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts<\/li>\n<\/ul>\n<p>Food for thought, we hope, for those chipping away at responsive design amalgamations!<\/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='#d46756' onclick='var dv=document.getElementById(\"d46756\"); 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='d46756' 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='#d46778' onclick='var dv=document.getElementById(\"d46778\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pixel\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46778' 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='#d46793' onclick='var dv=document.getElementById(\"d46793\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/algorithm\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46793' 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='#d46806' onclick='var dv=document.getElementById(\"d46806\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onresize\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46806' 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='#d67288' onclick='var dv=document.getElementById(\"d67288\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/settimeout\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67288' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>As well as the &#8230; intersection resizing concerns of Viewport and CSS Calc Intersection Resize Tutorial &#8230; there is also &#8230; screen resizing to consider &#8230; like with the recent WordPress Emoji Menu Screen Resize Tutorial heads up regarding how &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-screen-resize-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,14,37],"tags":[2422,281,2380,1942,400,576,652,1578,2256,1126,1209,1373,1404],"class_list":["post-67288","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-calc","tag-css","tag-delay","tag-document-body","tag-event","tag-html","tag-javascript","tag-onresize","tag-screen","tag-settimeout","tag-style","tag-viewport","tag-web-browser"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67288"}],"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=67288"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67288\/revisions"}],"predecessor-version":[{"id":67290,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67288\/revisions\/67290"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=67288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=67288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=67288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}