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.
Related
I have a header image which uses clip-path to make it's lower section angled like so:
CSS:
.angled {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}
I then apply this class to any div I want to become angled, which works, however for divs inside that class that contain text, the text does not fit to the newly shaped div. I would like it so the first line- the large title, fits neatly under the angle.
(note that with codepen, the video doesn't clip for some reason- it works fine locally- this isn't a concern)
Here is my codepen
.angled {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.angled-inverted {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<header>
<div class="overlay angled"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="angled">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3">Video Header</h1>
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
</div>
</div>
</div>
</header>
<section class="angled-inverted" style="background-color: grey; padding-top: -1rem; padding-bottom: 15rem;">
<div class="container-fluid" style="padding-left: 4rem">
<div class="row">
<div class="col">
<h1 style="font-size: 45pt">Angled Video Image</h1>
<p style="font-family:evogriaregular">The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background! The header text is vertically centered using flex utilities that are build into Bootstrap 4.</p>
<p>The overlay color can be changed by changing the <code>background-color</code> of the <code>.overlay</code> class in the CSS.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
</div>
</div>
</div>
</section>
clip path is not supported, is intended for images not for text,
if you set strict font size it can't change by itself,
padding cannot be negative,
unit pt shouldn't be used
and finally you spread css all around - external, inline arguing each other multi sub-layers
Any of the above cause problems.
I am trying to make a bootstrap card with a logo in the absolute middle, but the logo is fixed at the top?!? How can I accomplish this?
<div class="col-xl-3 col-md-6">
<div class="card mini-stat">
<div class="card-body text-center" style="height:10em">
<img src="public/assets/images/entrylogos/chromebook.png" class="card-img-top">
</div>
</div>
</div>
The CSS class:
.card-img-top {
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
Hoping for help and thanks in advance :-)
I hope it works with you, I just have to decrease the width of the picture, if you can notice I decreased to it to 50% and it worked with me magically because of the logo I have used, but I think that you should rechoose your width and height, just use what suits your logo.
.card-img-top {
max-width: 50%;
max-height: 50%;
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
I've looked a bit for this, and can't find it on SO. I basically have to put together a design as follows...
I'm using Bootstrap4 and I'm pretty good at CSS, and this is still giving me a bit of an issue. It should be full-screen, but I'd be open to giving it a max-width of 1400px.
My Idea: I currently had the idea of doing an element with the two elements on the side, and then use transform to rotate, and then put another element inside that has the background image and then uses transform to un-rotate it.
Here's my codepen to show what I've tried -
https://codepen.io/Gwapedwink/pen/ZaPvyo?editors=1100
<section>
<div class="image-splitter">
<div class="inner left">
<span style="background-image:url('http://placehold.it/940x240/222222/fff&text=left"></span>
</div>
<div class="inner right">
<span style="background-image:url('http://placehold.it/940x240/b4d455/fff&text=right"></span>
</div>
</div>
</section>
with the CSS of:
.image-splitter {
background-color: #f1f1f1;
position: relative; /* allows for absolute inside */
height: 240px; /* height of this section is 240px */
width: 100%;
overflow: hidden; /* important for this idea */
}
.image-splitter .inner {
position: absolute;
width:1000px;
height: 500px;
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
overflow:hidden;
}
.image-splitter .inner.left {
right: 50%;
transform: rotate(5deg) translateY(-50%);
z-index:10;
}
.image-splitter .inner.right {
left: 50%;
z-index:9;
}
.image-splitter .inner span {
display: block;
position: absolute;
top: 50%;
height:350px;
width: 100%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
/* background image properties */
background-position: center;
background-size: cover;
}
.image-splitter .inner.left span {
right: -50px;
transform: rotate(-5deg) translateY(-50%);
-webkit-transform: rotate(-5deg) translateY(-50%);
}
.image-splitter .inner.right span {
left: 0;
}
You can see that there are so many issues already, and I want to know if I'm missing something that's available. You can see that the text in the codepen should be level, but it isn't.
Thanks in advance!
I think the vertical misalignment of the texts on the two sides is due to how placehold.it renders the text onto the images, and not related to your code. If you observe the two sample images –"left" and "right"– alone, you will notice that the baseline of the printed texts are already on different heights. Here is an overlay of the two images in question:
This thing happens because of the two strings have different overall heights. So by using texts of similar heights could solve your issue with the placeholder images. I would use square brackets to equalise the height like so: "[left]" and "[right]".
To demonstrate this, I used another approach to achieve your splitted image effect. This one makes use of the clip-path css property, which is not available on IE and Edge, so it might or might not work for you in production. On the other hand, this one simplifies the css big time.
body { margin: 0; }
.image-splitter {
position: relative;
}
.inner {
overflow: hidden;
width: 60%;
height: 240px;
background: transparent no-repeat center center / cover;
}
.right {
position: absolute;
top: 0;
right: 0;
-webkit-clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);
clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);
}
<section>
<div class="image-splitter">
<div class="inner left" style="background-image:url('http://placehold.it/940x240/222222/fff&text=[left]">
</div>
<div class="inner right" style="background-image:url('http://placehold.it/940x240/b4d455/fff&text=[right]">
</div>
</div>
</section>
After recommendations from #dference, it became clear to use clip-path. The issue is of browser compatibility.
So, I took his answer above and then converted it to using SVG - but also had to use foreignObject to allow Edge support.
<div class="image-splitter">
<div class="inner left" style="background-image:url('https://picsum.photos/760/240?image=1067"></div>
<div class="inner right">
<!-- SVG CLIP -->
<svg width="100%" height="240px">
<defs>
<clipPath id="clipPolygon">
<polygon points="0 240,2000 240,2000 0,50 0">
</polygon>
</clipPath>
</defs>
<foreignObject clip-path="url(#clipPolygon)" width="100%" height="100%">
<img src="https://picsum.photos/760/240?image=1049">
</foreignObject>
</svg>
<!-- / SVG CLIP -->
</div> <!-- /.inner.right -->
</div> <!-- /.image-splitter -->
Throw that in with the CSS
/* image splitter */
.image-splitter {
position: relative;
height: 230px;
overflow: hidden;
& .inner {
overflow: hidden;
width: 60%;
height: 240px;
background: transparent no-repeat center center / cover;
}
& .right {
position: absolute;
top: 0;
width:50%;
right: 0;
/*-webkit-clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);
clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);*/
/* Clipping */
-webkit-clip-path: polygon(0px 240px,2000px 240px,2000px 0px,50px 0px);
clip-path: url("#clipPolygon");
& img {
width: 100%;
min-height: 240px;
}
}
}
You can take a look at this at my codepen - and you can also see the neat way that I did the content splitter below also.
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;
}
I am using HTML5 and CSS for designing a page. Will the following block of code set the specified image as background-image for two <div> with classes .headarea and .leo?
<div class="headarea" style="background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg)';width:100%">
<div class="leo">
<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95></img>
</div>
</div>
No. You can't reference files directly from your computer's hard drive - try uploading them to a website like http://imgur.com and reference the pictures from there. Most people recommend not to use spaces in filenames, as well.
You've made a mistake here:
background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg)';width:100%
You don't need the quotes:
background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg');width:100%
Also, the classes headarea and leo don't do anything, from what you've posted. You can remove them.
<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95></img>
to
<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95>
IMG for the closing tag
not required
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.headarea{
min-height: 380px;
background: url('http://logovoi2014.ru/wp-content/uploads/2015/01/TM-Priroda.jpg') no-repeat center top;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.leo img{
border: 2px solid #ccc;
position: absolute; top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
<div class="headarea">
<div class="leo">
<img src="http://catoftheday.com/archive/2014/AprilImages/10s.jpg" alt="" />
</div>
</div>