I've embed a google maps iframe giving it a class for a responsive behavior:
.google-maps {
padding-bottom: 55%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7325331.382945205!2d12.835158178438968!3d26.299870988416156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x13a892d98ece010d%3A0xfa076041c7f9c22a!2sLibya!5e0!3m2!1sen!2sin!4v1529409655794" width="350" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
In responsive mode it work, but when I try to put a text above or under the iframe, the text is covered by the map, and the map doesn't respect the dimension that I give to it like width=450 height=300.
When I remove the class, the text and the dimension given work, but of course the map is not responsive anymore.
Someone could help me?
Thank a lot!
Do not change the iframe css
remove this
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
and do this
.google-maps {
display: block;
width: 100%;
height: 200px // change this with media queries for different screen sizes
}
Btw it the style fully depends on what you are trying to achieve.
If you want to place the iframe inside the .google-maps you have to add the position: relative; to the .google-maps
.google-maps {
display: block;
position: relative;
width: 350px;
height: 400px;
overflow: hidden;
}
it will fit the iframe inside the google-maps div.
but better is don't try to resize the iframe use them as provided by the google or you can create your custom google map from here google map developeres.
Related
I am looking to make my video background like this:
http://www.teektak.com/
The issue I'm having is that my video is responsive, but it is fixed to the left. I can't figure out for the life of me how to make it so that it centers horizontally to the window when adjusted.
Here is a link to the test site to see what I am talking about: https://robotplaytime.paperplane.io/
HTML
<body>
<video poster="images/robotPlaytimeVideo.png" id="bgvid" autoplay loop muted>
<source src="images/robotPlaytimeVideo.mp4" type="video/mp4">
</video>
</body>
CSS
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
min-width: 100%;
min-height: 100%;
z-index: -100;
background: url(../images/robotPlaytimeVideo.png) no-repeat;
background-size: cover;
}
Add these CSS rules to your body (the video's parent container):
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
Add these CSS rules to your video:
display: inline-block;
position: relative; /* allows repositioning */
left: 100%; /* move the whole width of the image to the right */
margin-left: -200%; /* magic! */
Most of this was pulled directly from Bryce Hanscomb's answer to another similar question: How to center crop an image (<img>) in fluid width container
Here's a jsfiddle just in case:
http://jsfiddle.net/pLj0gcpu/
(Note that the markup and styles in this fiddle were pulled from your given URL)
To get the video to take the full size of the screen:
video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}
If you wanna center something horizontally responsively, then do
left: 50%;
transform: translateX(-50%);
Note, you will need to set a "position" as well
I want the user's cursor to be hidden over an iframe.
iframe {
cursor: none;
}
However it doesn't do the trick.
Do I need to use JavaScript? Can JavaScript even do it? What's the solution?
You could also do it without JavaScript.
Example: http://jsfiddle.net/dyV7L/
.wrapper {
position: relative;
}
.hide-cursor {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: none;
z-index: 100;
}
<div class="wrapper">
<iframe src="http://doc.jsfiddle.net/"></iframe>
<div class="hide-cursor"></div>
</div>
Unfortunately, I had to resort to js for this one.
var iframe = document.querySelector('iframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.style.cursor = 'none';
This won't work cross-domain, but I don't think you should be using something like that cross domain anyway.
Assuming this is all on your own domain, another good js solution would be to inject a stylesheet into the iframe, changing it's own css to cursor: none on the html or body. I have used a similar strategy for my content manager - I load the real page right into the admin panel, inject some elements and a stylesheet into it, and then have admin features available right on the site - loaded in the iframe.
I think the only solution without srcipts: create a div, set position: absolute to the div and Iframe, and set the div over the ifram with z-index.
Example:
iframe{
width: 600px;
height: 600px;
display:block;
z-index: 0;
margin-left: 0px;
margin-right: 0px;
position:absolute;
}
div{
width: 600px;
height: 600px;
z-index: 1;
display:block;
margin-left: 0px;
margin-right:0px;
position:absolute;
cursor:none;
}
UPDATE 2: Making further progress. Almost there!
jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/6/
The sprite is now 99% responsive, except that the
margin-bottom: %
Does not line up perfectly as the page changes width. The
margin-left: %
Seems to work great.
Any thoughts on how to align the margin-bottom perfectly?
UPDATE: Making progress, but still not yet there.
Below is the jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/5/
The sprite image that I wanted to crop is working responsively, except it is only being cropped horizontally and not vertically.
The Code below:
<div class="responsive-sprite" style="width: 100%;">
<img alt="Yay for alt tags..." src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" />
</div>
img {
width: 100%;
height: 200%;
margin-left: -81.869%;
}
.responsive-sprite {
overflow: hidden;
}
Can anyone think of a way to crop this vertically as well?
Below is the original post:
Is there a way to make CSS sprites responsive?
Take a look at the attached jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/2/
Is there a way to resize this CSS sprite once the container can no longer fit the full size image?
<div class="container">
<h2 class="popular"><img src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" alt="" />Featured</h2>
</div>
.container {
width: 20%;
margin: 0 auto;
}
h2 {
overflow: hidden;
position: relative;
height: 128px;
width: 192px;
max-width: 100%;
}
h2 img {
position: relative;
}
h2.popular img {
top: 0;
left: -867px;
}
h2.popular img:hover {
top: -128px;
left: -867px;
}
Hmmm. Tricky.
I haven't tested but would it work to orient the sprite horizontally instead of vertically and then:
h2 {
overflow: hidden;
position: relative;
width: 192px;
max-width: 100%;
}
h2 img {
position: relative;
width: 200%;
}
h2.popular img {
top: 0;
left: 0;
}
h2.popular:hover img {
top: 0;
left: -100%;
}
Edit:
Seems to work, the sprite just needs to be configured. Have a look at this JSFiddle.
Unfortunately, I think you will have to do each button individually because the image height is what determines the button height when it is resized.
I have this image that I want to display on top of my product images when you HOVER on them.
This is what i'm using:
.centerBoxContentsFeatured img:hover {
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
It does work but it's being display behind the product image instead of on top of it. I tried absolute positioning and z-index but nothing seems to work.
http://www.pazzle.co.uk - trying to apply on the images on the main page. <<
EDIT:
#featuredProducts.centerBoxWrapper {
position: relative;
}
#featuredProducts.centerBoxWrapper:hover:before {
content: '';
width: 187px;
height: 179px;;
position: absolute;
top: 0;
left: 0;
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
a {
display: block;
position: relative;
width: 100px;
height: 100px;
}
a:hover:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
Demo
Use a pseudo element.
It's doing exactly what it's supposed to do. It's a background, so it will appear behind the container's content.
What you have to do here is to overlay a div over the image you're hovering.
I think this is possible a with a pure CSS solution, but it might be easier with some JavaScript.
See this question: on hover overlay image in CSS
I used a CSS code to hide an iframe behind an image :
<style>
iframe{
opacity: 0;
border: 0px none transparent;
position: absolute;
top: 0px;
left: 0px;
height: 400px;
width: 500px;
filter:alpha(opacity=0);
}
img{
position: absolute;
top: 0px;
left: 0px;
height: 350px;
width: 401px;
}
</style>
I inserted Google Ads in the header, but ads are invisible, Please help!
you are currently applying your style to all iframes and imgs on the document.
You should use classes or ids instead, so you apply just to certain elements.
Using classes:
iframe.myframe{
...
}
//or simply
.myframe{
}
Using ids
#myframe {
...
}
and your HTML should be:
<iframe class="myframe"> or <iframe id="myframe">
Ids can only be used once per document, while classes can be used on several tags. This way your CSS should only affect specific elements, and leave the rest unaltered.
Hope it helps!