I am using the below code for iframe on my website.
.callrates {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: scroll !important;
-webkit-overflow-scrolling:touch !important;
height:500px;
}
.callrates iframe {
position: relative;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="callrates">
<iframe src="https://www.xyz.php" width="200px" height="0" allowfullscreen=" " frameborder="0" scroll="no"></iframe>
</div>
The problem is when I view it from a mobile device in portrait orientation the width of iframe is more than the screen size and therefore makes it scroll horizontally as well as vertically. I want the full width to fit in the screen. How do I do this?
Checkout this codepen: http://codepen.io/anon/pen/YpZgYm
<iframe src="https://www.xyz.php" width="" height="0" allowfullscreen=" " frameborder="0" scroll="no">
Update:
May not be the most elegant solution but you can zoom out the iframe content if making the iframe source page responsive isn't an option.
Try adding
iframe{
-ms-zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}
Related
Thanks in Advance,
I want to show the website in the iframe with background-image,
and Responsive.i'm trying with this CSS but works for force desktop view but not responsive.
check this snippet.
I got the desktop view but not responsive
div.laptop-wrapper {
position: relative;
padding-top: 25px;
padding-bottom: 65.5%;
height: 0;
}
div.laptop-wrapper iframe {
box-sizing: border-box;
background: url(https://i.stack.imgur.com/zZNgk.png) center center no-repeat;
background-size: contain;
padding: 11.9% 15.5% 14.8%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.frame {
width: 1080px;
height: 786px;
border: 0;
-ms-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
-webkit-transform: scale(0.25);
transform: scale(0.5);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="laptop-wrapper">
<iframe class="frame" src="https://laravel.com/"></iframe>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="laptop-wrapper">
<iframe width="420" height="315" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<h1 class="text-center">I want like this but it's not responsive, i need responsive </h1>
<div class="laptop-wrapper">
<iframe class="frame" src="https://laravel.com/"></iframe>
</div>
The "request desktop" option in most browsers works by altering the user-agent header, as described here.
To view an iframe in "desktop mode" you would have to send a header that is different from the default browser setting, and unfortunately according to this question that is not possible. However what you can try is to use AJAX, a more detailed description and example is given at the aforementioned question.
Hopefully you can do something with this.
I have a problem with scaling down content in iFrames. When applying CSS transform:scale on an iframe, the content appears crispy. (not antialiasing text and images)
Here is a codepen I created as example:
<iframe id="desktop" src="https://en.wikipedia.org/wiki/Responsive_web_design" scrolling="no"></iframe>
iframe {
width: 1600px;
height: 992px;
transform: scale(0.4181);
-webkit-transform: scale(0.3181);
-o-transform: scale(0.3181);
-ms-transform: scale(0.3181);
-moz-transform: scale(0.3181);
transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
}
https://codepen.io/front-end-developer/pen/gEPvKv
Applying transform(scale) on an iframe, the content in the iframe is not antialiased. Is there another CSS solution to scale down iframe content with antialiasing enabled?
Here is the full demo to create a responsive mockup
When I updated the octagon's background image, it seems to have stretched it. Before, with the same CSS and a different image, it was normal.
Here is the original photo. As you can see, it is NOT stretched:
Here is the octagon photo that is stretched:
Here is all the code affecting the octagon image:
img[Attributes Style] {
width: 300px;
height: 300px;
}
* {
box-sizing: border-box;
}
.octo {
transform: rotate(45deg);
}
.octo1 {
transform: rotate(-45deg);
}
.octo,
.octo div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 300px;
height: 300px;
}
<div class="octo">
<div class="octo1">
<img src="https://i.stack.imgur.com/5voQJ.jpg" alt="" width="300" height="300" />
</div>
</div>
Instead of using <img>, include the image as a background-image for a <span> element, and use background-size: cover on it. To position the image, adjust the background-position values.
.octo-image {
display: block;
width: 300px;
height: 300px;
background-position: center center;
background-size: cover;
}
* {
box-sizing: border-box;
}
.octo {
transform: rotate(45deg);
}
.octo1 {
transform: rotate(-45deg);
}
.octo, .octo div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 300px;
height: 300px;
}
<div class="octo">
<div class="octo1">
<span class="octo-image" style="background-image: url('https://i.stack.imgur.com/5voQJ.jpg')"></span>
</div>
</div>
Alternatively, you could use <img> with object-fit: cover as well, but then you have to use a polyfill to support IE11 and older:
.octo-image {
width: 300px;
height: 300px;
object-fit: cover;
object-position: center center;
}
* {
box-sizing: border-box;
}
.octo {
transform: rotate(45deg);
}
.octo1 {
transform: rotate(-45deg);
}
.octo, .octo div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 300px;
height: 300px;
}
<div class="octo">
<div class="octo1">
<img class="octo-image" src="https://i.stack.imgur.com/5voQJ.jpg"></span>
</div>
</div>
Use a square source image, not a landscape rectangle. Specifying the height and width of an image force it to be a square. Your image will get squished on the horizontal and stretched on the vertical since it is a landscape image. This has nothing to do with your octagon styling. See my below example:
<img src="https://i.stack.imgur.com/oiEvT.png" height="300" width="300" />
Alternatively, if you can't use a background image you could use the clip-path property to draw the octagon with a cleaner markup and a full-responsive behaviour
Codepen demo
Markup
<figure>
<img src="https://i.stack.imgur.com/5voQJ.jpg" alt=""/>
</figure>
CSS
/*
* The outer wrapper defines the shape and hides the overflow of the
* inner image. The max-width ensures the responsiveness.
*/
figure {
position: relative;
max-width: 300px;
overflow: hidden;
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%,
70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
/*
* This pseudoelement ensures to keep the correct aspect ratio
* through the padding-bottom property. Since the image should be
* squared, the padding must be 100% of the element width
*/
figure::before {
content: "";
display: inline-block;
padding-bottom: 100%;
}
/*
* Finally the image must be properly centered (it requires some
* adjustment if the subject it's not aligned in its canvas),
* the height is 100% of its container but the width is not
* specified so the image can scale, keeping its natural
* aspect ratio
*/
img {
position: absolute;
left: 45%;
height: 100%;
transform: translateX(-50%);
}
Final result
I have a full screen background image for my website landing page with my logo in the centre. The website uses Bootstrap and is fully responsive. The logo is vertically and horizontally aligned in my browser window and when the window is resized the logo correctly stays in the centre. But when viewing on a phone or tablet the image background images resizes correctly but the logo does not stay in the centre of the page, but is situated to the right of the screen with half of it obscured.
Any ideas on how I might rectify this? The website landing page is live you can find it at www.burnser.com
Here's the code:
<img alt="full screen background image" src="img/bg.jpg" id="full-screen-
background-image" />
<div class="centered">
<a href="work.html"><img src="img/home_logo.png" alt="BB Logo" width="200"
height="137"></a>
</div>
And here's the CSS I'm using:
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Any help would be much appreciated.
Looks fine on my phone. Try another browser and also try to prefix transform.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Btw, 1MB background image is huge. You should blur that noise out to reduce size of image.
im creating simple website. On desktop, whole content is centered ok. It works also with changing size of browser.
But when I visited it on mobile, everything is not centered like on desktop
Take a look: http://piaskownica.lokalnamanufaktura.pl/metod2/
I think that my css wrap class for centering is buggy. Videobackground also is not centered on desktop.
.wrap {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
}
.x2-horizontal has a width of 380px that is too wide for small screens. Watch out for fixed widths in responsive designs.
Your layout method is not ideal. For a start, think of devices that don't support transform.
The video control won't center using margin: auto because of position: absolute. You'd have to use the same kind of centering methos as for the other content (i.e. left: 50% and then pulling it back 50% of its width.)
The issue is that the wrap is getting crushed too small to contain all of the elements. Perhaps you could use a media query to reduce their size on mobile. A simple solution for this case would be
#media (max-width: 600px) {
body {
zoom: .8;
}
}
which would reduce the size of the whole body to 80% so that it doesn't overflow and wrap to new lines. In addition, if you want to center your background video, try changing the bottom and right to 50% instead of 0 in the #video_background, and also add your transform lines onto that.
#video_background {
position: fixed;
bottom: 50%;
right: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(50%) translateY(50%);
}