Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Need responsive iframe layout

Need responsive iframe layout

Problem

I want design a page with 4 iframes in it and responsive layout for it. Below is the code which works on desktop but on ipad this is not working properly. And I want responsive layout for it.

Demo

Problem courtesy of: ABC

Solution

For Responsive layout use CSS Media Queries

DEMO

HTML

CSS

html, body {
    height:100%;
}
.wrapper {
    padding: 0 1%;
    width:98%;
}
.h_iframe {
    float:left;
    margin:1% 2%;
    width:46%;
}
iframe {
    width:100%;
}
@media screen and (max-width: 768px) {
    .wrapper {
        margin:0 auto;
        padding:0;
        width:95%;
    }
    .h_iframe {
        margin:0;
        width:100%;
    }
}
Solution courtesy of: Santy

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Need responsive iframe layout

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×