{"id":68855,"date":"2025-07-01T03:01:00","date_gmt":"2025-06-30T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=68855"},"modified":"2025-07-01T10:00:00","modified_gmt":"2025-07-01T00:00:00","slug":"landing-page-web-inspector-iphone-css-styling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/landing-page-web-inspector-iphone-css-styling-tutorial\/","title":{"rendered":"Landing Page Web Inspector iPhone CSS Styling Tutorial"},"content":{"rendered":"
\"Landing<\/a>

Landing Page Web Inspector iPhone CSS Styling Tutorial<\/p><\/div>\n

We’ve put up with a Landing Page annoyance regarding iPhone Portrait viewing for some time now, but today we’ve bitten the bullet and attended to the issue whereby the last “g” in RJM Programming butted up to the right hand side of the Portrait screen annoyingly. They say “pixel perfect” and today’s work is a bit like that, further to other web inspector work helping the Landing Page talked about at Landing Page Web Inspector CSS Styling Tutorial<\/a>.<\/p>\n

Today, we make use of the fact that CSS can be dynamically changed in the arrangements of most webpages just by adding <style> CSS styling <\/style> into the innerHTML property of a suitable HTML element.<\/p>\n

We also found the CSS clause …<\/p>\n

\n!important\n<\/p><\/blockquote>\n

… impotent, on occasions, trying to help, and so we went around with Javascript DOM “undoing” a className scenario, something we cannot remember ever undertaking, but not so strange given it is only …<\/p>\n

    \n
  1. iPhone device width<\/li>\n
  2. Portrait<\/li>\n<\/ol>\n

    … scenarios we are talking about here. That “un<\/sup>classing” leaves the door open to ensuring our chosen 62px font-size CSS property holds sway, for these scenarios. In doing the job, it was our default just to break the … <\/p>\n


    \nRJM Programming
    \n<\/code><\/p>\n

    … text at the space character, and that “ever so mild” scrunching up of content helped, but there are a myriad of ways to going about this job, tabularized below …<\/p>\n\n\n\n\n\n\n\n\n\n\n\n
    Idea<\/th>\nJavascript DOM<\/th>\n<\/tr>\n
    Default<\/a><\/td>\n\n
    \ndocument.getElementById('topspan').innerHTML=document.getElementById('topspan').innerHTML.replace('RJM Programming', 'RJM<\/h1><h1 style=font-size:62px;>Programming').replace(\/\\<\\\/hJUNK1\/g, '<\/h2');
    \n<\/code>\n<\/td>\n<\/tr>\n
    Border<\/a><\/td>\n\n
    \n setTimeout(function(){ document.getElementById('toph1').className=document.getElementById('toph1').className.replace('jumbo', 'jumXbo');
    \n document.getElementById('laststyle').innerHTML+='<style> h1 { font-size: 62px !important; } <\/style>';
    \n document.getElementById('laststyle').innerHTML+='<style> h1 { outline-right: 6px solid transparent; } <\/style>';
    \n }, 200);
    \n<\/code>\n<\/td>\n<\/tr>\n
    Classname<\/a><\/td>\n\n
    \n setTimeout(function(){ document.getElementById('toph1').className=document.getElementById('toph1').className.replace('jumbo', 'jumXbo');
    \n document.getElementById('laststyle').innerHTML+='<style> h1 { font-size: 62px !important; } <\/style>';
    \n }, 200);
    \n<\/code>\n<\/td>\n<\/tr>\n
    Margin<\/a><\/td>\n\n
    \n setTimeout(function(){ document.getElementById('toph1').className=document.getElementById('toph1').className.replace('jumbo', 'jumXbo');
    \n document.getElementById('laststyle').innerHTML+='<style> h1 { font-size: 62px !important; } <\/style>';
    \n document.getElementById('laststyle').innerHTML+='<style> h1 { padding-right: 6px; } <\/style>';
    \n }, 200);
    \n<\/code>\n<\/td>\n<\/tr>\n
    Font<\/a><\/td>\n\n
    \n setTimeout(function(){ document.getElementById('toph1').className=document.getElementById('toph1').className.replace('jumbo', 'jumXbo');
    \n document.getElementById('laststyle').innerHTML+='<style> h1 { font-size: 62px !important; } <\/style>';
    \n }, 200);
    \n<\/code>\n<\/td>\n<\/tr>\n
    After<\/a><\/td>\n\n
    \n setTimeout(function(){ document.getElementById('toph1').className=document.getElementById('toph1').className.replace('jumbo', 'jumXbo');
    \n document.getElementById('laststyle').innerHTML+='<style> h1 { font-size: 62px !important; } <\/style>';
    \n document.getElementById('laststyle').innerHTML+=\"<style> h1:after { content: ' ' !important; } <\/style>\";
    \n }, 200);
    \n<\/code>\n<\/td>\n<\/tr>\n
    Wording<\/a><\/td>\n\n
    \n setTimeout(function(){ document.getElementById('toph1').className=document.getElementById('toph1').className.replace('jumbo', 'jumXbo');
    \n document.getElementById('laststyle').innerHTML+='<style> h1 { font-size: 62px !important; } <\/style>';
    \n document.getElementById('toph1').innerHTML+=\" \";
    \n }, 200);
    \n<\/code>\n<\/td>\n<\/tr>\n
    Overflow<\/a><\/td>\n\n
    \n setTimeout(function(){ document.getElementById('toph1').className=document.getElementById('toph1').className.replace('jumbo', 'jumXbo');
    \n document.getElementById('laststyle').innerHTML+='<style> h1 { font-size: 62px !important; } <\/style>';
    \n document.getElementById('topspan').style.width='' + eval(0 + eval('' + document.documentElement.clientWidth)) + 'px';
    \n document.getElementById('topspan').style.wordWrap='keep-all';
    \n }, 200);
    \n<\/code>\n<\/td>\n<\/tr>\n
    Was<\/a><\/td>\n\n<\/td>\n<\/tr>\n<\/table>\n

    … in a changed<\/a> index.php<\/a> RJM Programming Landing Page<\/a>.<\/p>\n

    \n

    \n

    Previous relevant Landing Page Web Inspector CSS Styling Tutorial<\/a> is shown below.<\/p>\n

    \"Landing<\/a>

    Landing Page Web Inspector CSS Styling Tutorial<\/p><\/div>\n

    Are you a member of the IBORT? If not, would you like to become a member? Anyone, anyone<\/a>? Hang on, Isaac<\/a>, can you please “use your words” in front of the class, please … <\/p>\n

    \nWhat does IBORT stand for?\n<\/p><\/blockquote>\n

    Okay, class … over to you<\/a> …<\/p>\n

    Well, okay Sandra<\/a>, yes, we understand “World Peace” might work … but anyone else?<\/a><\/p>\n

    .
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.
    \n.<\/p>\n

    You all give up?!<\/p>\n

    \nInternational Board of Registered Tweakers
    \n(no Registered Tweakers were harmed in the making of this infomercial)<\/font>\n<\/p><\/blockquote>\n

    Yes, you can tweak webpages in the morning or afternoon, and for simple styling changes we recommend …<\/p>\n

      \n
    1. getting the relevant webpage showing in your favoured web browser on a non-mobile platform …<\/li>\n
    2. inspect that webpage via that web browser’s Web Inspector<\/a> … for Google Chrome on macOS we went …
      \n
      \nView -> Developer -> Developer Tools -> \"Elements\" tab
      \n<\/code>
      \n …\n<\/li>\n
    3. the “before your eyes, dynamically” approach being to zero in on web element style=”[CSS styling]”<\/i> parts and, “tweak away” …<\/li>\n
    4. the results immediate and further tweakable, until you are happy … then …<\/li>\n
    5. think what can be done to directly, or indirectly (eg. “client pre-emptive iframe”<\/a> action) to simulate this change back at the relevant code (in our RJM Programming Landing Page case some PHP in our Apache web server’s Document Root folder called “index.php”) to simulate what you were happy with back at your Web Inspector session (ie. until this, your changes are “Ephemeral”<\/a>) …<\/li>\n
    6. you upload into place to turn a “tweak”<\/a> into some “tweak realia”<\/a><\/li>\n<\/ol>\n

      If this was interesting you may be interested in this<\/a> too.<\/p>\n