_add_responsive_screensize_toggles_wpcodebox.md

Add responsive screen size buttons in css/scss preview iframe and increase width of iframe

add_responsive_screensize_toggles_wpcodebox.php

<?php
add_action("admin_head", "add_responsive_buttons_to_wpcodebox");
function add_responsive_buttons_to_wpcodebox()
{
    ?>
    <style>
      //this line increases the width of the iframe by setting max-wdith for the snippet codebox
      .snippet-container:has(~.preview-container) {
           max-width: 700px;
       }
        .responsive-buttons {
            position: absolute;
            top: 50px;
            right: 65px;
            display:none;
            z-index:1;
        }
        .responsive-buttons button {
            margin-right: 5px;
            min-width:70px;
        }
        .preview-container #wpadminbar{
        display: none !important; 
        }
        .preview-container iframe{
        margin: auto;
        }
        .responsive-buttons:has(~ #wpwrap .preview-container){
        display:block !important;
        }
        .snippet-container:has(~.preview-container) {
        max-width: 700px;
        }
    </style>

    <div class="responsive-buttons">
        <button class="preview-full">Full</button>
        <button class="preview-desktop">Desktop</button>
        <button class="preview-tablet">Tablet</button>
        <button class="preview-mobile">Mobile</button>
    </div>
    <script>
        jQuery(document).ready(function($) {
            $('.preview-full').click(function() {
                $('.preview-container iframe').width('100%');
                $('.preview-container iframe').height('100%');
            });
            $('.preview-desktop').click(function() {
                $('.preview-container iframe').width(1200);
                $('.preview-container iframe').height(800);
            });
            $('.preview-tablet').click(function() {
                $('.preview-container iframe').width(768);
                $('.preview-container iframe').height(1024);
            });
            $('.preview-mobile').click(function() {
                $('.preview-container iframe').width(360);
                $('.preview-container iframe').height(640);
            });
            $('div span:contains("PREVIEW")').on("click", function() {
                $('.responsive-buttons').toggle();
            });
        });

    </script>
    <?php
}