I am working on a SaaS application, which essentially provides a full webpage to the client. The client can access their page at: http://client.myapp.com . However I want to allow clients to embed this page easily on their website. At the moment I just provide an iframe embed code with stylesheet to reset the margin of the body tag.
<head>
<style type="text/css">
html { overflow: auto; }
html, body, div, iframe { margin: 0px; padding: 0px; height: 100%; border: none; }
iframe { display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden; }
</style>
</head>
<body>
<iframe id="myapp" name="myapp" src="https://client.myapp.com" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</body>
However when they include the iframe, the page is no longer responsive. How can I replicate the responsiveness of the original webpage when using an iframe (or any other way you might suggest) ?
So I found two solutions to the problem:
Solution 1:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body { margin: 0px; } .embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; min-height: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
</head>
<body>
<div class='embed-container'><iframe src='https://client.myapp.com' style='border:0;'></iframe></div>
</body>
Solution 2:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
/* Using http://npr.github.io/responsiveiframe/ */
<script src="jquery.responsiveiframe.js"></script>
<script type='text/javascript'>
$(function() {
$('iframe').responsiveIframe({xdomain: '*'});
});
</script>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<iframe src='https://client.myapp.com' style='border:0; width: 100%; height: 100%;'></iframe>
</body>
So far it appears both work just fine on a desktop browser (Chrome, Firefox) and on my mobile (Android 4)
Add something like this
#media screen and (min-width: 768px) {
iframe{
min-width:768px;
}
}
#media screen and (min-width: 992px) {
iframe{
min-width:992px;
}
}
#media screen and (min-width: 1200px) {
iframe{
min-width:1200px;
}
}
to your css file.
These media queries causes the iframe width to match the containing screen width.
Ensure that you are using: <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your iframes header.
Related
I am trying to create a simple webpage using bootstrap that has some text fixed centered at the top and some more centered text fixed to the bottom of the page.
In the middle of the page I need an centrally horizontal and vertically placed image that scales depending on resolution/device.
The page needs to be full height of the viewport.
I have tried using the following code but it doesnt work properly and is a miss and there must be a simpler way of doing it?
The logo image is 450px x 480px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<meta name="author" content="" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<style>
html, body {
height: 100%;
}
.holder {
width: 100%;
height: 100%;
min-height: 100%;
display: block;
}
.fill {
min-height: 100%;
height: 100%;
}
.col-md-12 {
position: relative;
min-height:100vh!important;
}
.toptext{
background-color:#ffffff!important;
z-index:99999!important;
}
.bottomtext {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
margin-bottom: 20px;
background-color: #ffffff !important;
z-index: 99999 !important;
}
.middleimage > img {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:1!important;
max-height:350px!important;
}
#media screen and (min-width:1px) and (max-width: 767px) {
h3 {
font-size: 16px !important;
}
.bottomtext{
bottom:80px!important;
}
html,body {
overflow: hidden!important;
}
}
#media screen and (min-width:567px) and (max-width: 767px) {
.bottomtext {
bottom: 80px !important;
}
html, body {
overflow:visible !important;
}
.middleimage>img{
max-height:100px!important;
}
}
#media screen and (min-width:760px) {
.bottomtext {
bottom: 0 !important;
}
html, body {
overflow: visible !important;
}
.middleimage > img {
max-height: 480px !important;
}
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container fill">
<div class="holder">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="toptext text-center">
<h3>Top of page info</h3>
<hr>
</div>
<div class="middleimage">
<img src="/holdingfiles/mylogo.png" alt="" class="img-responsive " />
</div>
<div class="bottomtext">
<hr>
Bottom of page / footer info
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Carl,
Since you are using bootstrap, go with 'img-responsive' class on div/img and it should scale nicely.
EDITED: you can use it as background image for your div: check out the following link which should give you what you want
https://css-tricks.com/perfect-full-page-background-image/
I have an embedded video on a web page. The video has a title under it wrapped in the h2 header tag. The video also has text under it wrapped in a P tag. I have made the video responsive so users can view the video using their Mobile phones. However, I don't know how to make the header tag and the paragraph tag responsive. The h1 tag is too big for the cell phone size. I want the font-size smaller based on the width of the screen. How do I make the text responsive under my video.
This is the code:
<!DOCTYPE html>
<html>
<head>
<title>Responsive design</title>
<link type="text/css" rel="stylesheet" href="main.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.another-container {
max-width: 600px;
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<div class="another-container">
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ggh_y-33Eso" frameborder="0" allowfullscreen></iframe>
</div>
<h1>Learn HTML in 15 Minutes</h1>
<p> Learning html is the foundation for all great webmaster</p>
</div>
</body>
</html>
Use media queries to Handle the h1 and p tag styles. http://www.w3schools.com/css/css_rwd_mediaqueries.asp
For example
#media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content:" In fact, it's between 500px and 600px wide.";
}
}
</style>
I try to put a container on top of a background image. The content of this container will be images. Unfortunately I can't get the container stick to to background-image if I resize the browser window.
Is there way that a container always stays at the same place but also scales together with the background-image? Let's say the background-image is 1000x1000px and the container on top is 500x500. On a smaller browser the images scales down to lets say 500x500px. Now the container and its content should also scale down 50% but should stay at the same place.
This is what I have so far (it's just an example):
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, sans-sarif; font-size: 10px; }
#background_image {
background-image: url("http://ws2-media1.tchibo-content.de/newmedia/art_img/MAIN_ALT_3-IMPORTED/4113906f0b0eab32/regal-weiss.jpg");
max-width: 55.3em;
width: 100%;
max-height: 47.1em;
height: 100%;
background-size:contain;
background-repeat: no-repeat; }
#container { background-color: #FF0004; max-width: 5em; width: 100%; max-height: 5em; height: 100%; position: relative; left: 40%; top: 55%; }
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unbenanntes Dokument</title>
<style>
</style>
</head>
<body>
<section id="background_image">
<div id="container"></div>
</section>
</body>
</html>
Thank you very much in advance.
What i would do is media queries
#media screen and (min-width: 480px) {
#background_image{
}
#container {
}
}
depending on what size of the screen is u need to position the #container and give the right width of the #background_image
This is where i learn
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I have a web site where the min-width is set to 767px until I can get around to making a purely mobile version.
However, when this is pinched in to view the entire 767 width, the height does not honor the 100%. It appears to stay at whatever height was set when zoomed out to 1.
Here is a screenshot:
It works fine on landscape, but not on portrait.
How do I fix this?
Edit: Here's a full html that shows the problem...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
<style>
html, body {
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
height: 100vh;
min-height: 100vh;
background: red;
padding: 0;
margin: 0;
}
#navbar {
background: blue;
min-width: 767px;
}
</style>
</head>
<body>
<div id="navbar">Test</div>
<div ng-view id="mainBody">Test</div>
</body>
</html>
add a meta tag for viewport
<meta name="viewport" content="height=device-height, initial-scale=1.0" />
you can use vh unit for full height:
#mydiv {
display:block;
height:100vh;
}
see units from css3 on w3schools
I have an IMG element on my page. I set the height and width to 100% so IMG tag should cover the page. However I have some space at the end of the image
Please see here: http://kekor.hostzi.com/
Dev tools screenshot : http://i.imgur.com/0TKkDDv.jpg
Here is the code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {margin: 0; padding: 0;}
.balotelli { width: 100%; height: 100% }
body {background-color: red; height: 100%}
html {height: 100%}
</style>
</head>
<body>
<img class="balotelli" src="balotelli.jpg" alt="ss" />
</body>
</html>
I don't see any margins on your page. Are you referring to the scrollbars?
To remove scrollbars, use this CSS on your page:
html, body {
margin: 0 !important;
overflow: hidden !important;
}
You will also want to set your image to block element:
.balotelli {
width: 100%;
height: 100%;
display: block;
}
Try cleaning up styles syntax and add position: absolute;
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {margin: 0; padding: 0;}
.balotelli { width: 100%; height: 100%; position: absolute; }
body {background-color: red; height: 100%;}
html {height: 100%;}
</style>
</head>
<body>
<img class="balotelli" src="http://kekor.hostzi.com/balotelli.jpg" alt="ss" />
</body>
</html>