Clever Geek Handbook

CSS: echo min-width inside iframe

I am using CSS @media tag and max-width. The requirement is to have smaller text size on large screens and larger text size on mobile screens. So, at a basic level, I have:

body {
    font-size: 13px;
 }

@media (max-width:991px){
    body{   
        font-size:24px;
    }
}

This works great, but there are elements on the screen that open frames on the screen that are less than 992px wide, so they will have a huge 24px font on them even on large screens. Is there a way to make the max-width rule follow the screen width and not the iframe width?

+3


source to share


2 answers


Specifically your body with an id and then styling on that id like this:



<body id="mainBody">
...
</body>
@media (max-width:991px){
    #mainBody{   
        font-size:24px;
    }
}
+1


source


You can use jquery for this problem. you can use the resize function just like this.

$(window).ready(function(){
    //this will get the default screen width
    var width = $(window).width(); //this will get the width of your screen.
        $("#iframeID").css({"width":width+"px"});

    //this is when you resize the screen
    $(window).resize(function(){
        width = $(this).width(); //this will get the width when you resize the screen.
        $("#iframeID").css({"width":width+"px"});

    });
});


Hope it works.

0


source






More articles:


All Articles