Kdjykuj

I have modified the content of the newsletter popup in my magento 2 site with porto theme enabled. I was able to update the content from the Admin>configuration>porto>setting

But I want the popup to become disable when the screenwidth of the device is less than 1600.

This is the full length of the phtml file:

<?php

/**

 * Copyright © 2015 Magento. All rights reserved.

 * See COPYING.txt for license details.

 */



// @codingStandardsIgnoreFile



?>

<?php

    $_helper = $this->helper('SmartwavePortoHelperData');



    $popup = $_helper->getConfig('porto_settings/newsletter');

    if($popup['enable']) {



        $delay = $popup["delay"];

?>

if ($screenWidth >1600) {



<script type="text/javascript">

require([

        'jquery',

        'jquery/jquery.cookie'

    ], function ($) {

        $(document).ready(function(){

        <?php if($popup['enable'] == 1): ?>

            if($("body").hasClass("cms-index-index")) {

        <?php endif; ?>

                var check_cookie = $.cookie('newsletter_popup');

                if(window.location!=window.parent.location){

                    $('#newsletter_popup').remove();

                } else {

                    if(check_cookie == null || check_cookie == 'shown') {

                        setTimeout(function(){

                            beginNewsletterForm();

                        }, <?php echo $delay; ?>);

                    }

                   /* if($.cookie('newsletter_popup') == 'dontshowitagain'){

                        $('#newsletter_popup').hide();

                    } else {*/

                        $('#footer_newsletter').on('change', function(){

                            if($(this).length){        

                                var check_cookie = $.cookie('newsletter_popup');

                                if(check_cookie == null || check_cookie == 'shown') {

                                    $.cookie('newsletter_popup','dontshowitagain');            

                                }

                                else

                                {

                                    $.cookie('newsletter_popup','shown');

                                    beginNewsletterForm();

                                }

                            } else {

                                $.cookie('newsletter_popup','shown');

                            }

                        });

                        $("close-button").click()

                            {

                              $.cookie('newsletter_popup','dontshowitagain');

                            }

                  //  }

                }

        <?php if($popup['enable'] == 1): ?>

            }

        <?php endif; ?>

        });



        function beginNewsletterForm() {

            $.fancybox({

                'padding': '0px',

                'autoScale': true,

                'transitionIn': 'fade',

                'transitionOut': 'fade',

                'type': 'inline',

                'href': '#newsletter_popup',

                'onComplete': function() {

                    $.cookie('newsletter_popup', 'shown');

                },

                'tpl': { 

                    closeBtn: '<a id="close-button "title="Close" class="fancybox-item fancybox-close fancybox-newsletter-close" href="javascript:;"></a>' 

                },

                'helpers': {

                    overlay: {

                        locked: false

                    }

                }

            });

            $('#newsletter_popup').trigger('click');

        }

});

</script>

<style type="text/css">

<?php

    if($popup["custom_style"]){

        echo $popup["custom_style"];

    }

?>

#newsletter_popup

{

<?php

    if($popup["width"]){

        echo "width:".$popup["width"].";";

    }

    if($popup["height"]){

        echo "height:".$popup["height"].";";

    }

    if($popup["bg_color"]){

        echo "background-color:".$popup["bg_color"].";";

    }



if(isset($popup["bg_image"]) && $popup["bg_image"]){

        $folderName = SmartwavePortoModelConfigBackendImageNewsletterbg::UPLOAD_DIR;

        $path = $folderName . '/' . $popup["bg_image"];

        $imageUrl = $_helper->getBaseUrl() . $path;

?>

    background-image:url(<?php echo $imageUrl;?>);

<?php

    }

?>

}

</style>

<div class="newsletter" id="newsletter_popup" style="display: none;">

    <div class="block-content" >

        <?php

            if(isset($popup["logo_src"]) && $popup["logo_src"]){

                $folderName = SmartwavePortoModelConfigBackendImageNewsletterlogo::UPLOAD_DIR;

                $path = $folderName . '/' . $popup["logo_src"];

                $logoUrl = $_helper->getBaseUrl() . $path;

        ?>

                <img src="<?php echo $logoUrl; ?>" alt="" />

        <?php

            }

        ?>

        <?php echo $popup["content"];  ?>

        <form class="form subscribe"

            novalidate

            action="<?php echo $block->getFormActionUrl() ?>"

            method="post"

            data-mage-init='{"validation": {"errorClass": "mage-error"}}'

            id="newsletter-validate-detail">

    <!--

            <div class="field newsletter">

                <div class="control">

                    <input name="email" type="email" id="footer_newsletter"

                                data-validate="{required:true, 'validate-email':true}"/>

                </div>

            </div>

            <div class="actions">

                <button class="action subscribe primary" title="<?php echo __('Go') ?>" type="submit">

                    <span><?php echo __('Go') ?></span>



            </div> -->

        </form>

        <div class="subscribe-bottom">

            <input type="checkbox" value="dontshowitagain" id="newsletter_popup_dont_show_again" style="display: none;" />

            <!-- <label for="newsletter_popup_dont_show_again"><?php echo __("Don't show this popup again"); ?></label> -->

        </div>

    </div>

</div>

<?php

    }



?>

I was trying to use the following variable:

$screenWidth = '<script type="text/javascript">document.write(screen.availWidth);</script>';

but not sure how to do that. Any other method is also appreciated.
Thank you