How to center an iframe, responsive
Tags: css,iframe,responsive-design,center
Problem :
I have this small part of html code, and like to the iframe just the half size, but centered of the page:
Here is the page: https://www.outdoorequipped.com/active/contacts
<div class="row">
<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2s!4v1451982933747!6m8!1m7!1sIT5z6S82FJMAAAQZdjRuFQ!2m2!1d34.238620415813!2d-77.94889641093141!3f55.18!4f0!5f0.7820865974627469" height="250" width="600"></iframe>
</div>
</div>
and her my css:
.map-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
/* 16x9 Aspect Ratio */
.map-container-16x9 {
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.map-container-4x3 {
padding-bottom: 75%;
}
.map-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
Any idea how to do it correct?
Solution :
Would this be what you're trying to do ?
.map-container iframe {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
}
Or this ? (without absolute positioning)
.map-container iframe {
width: 50%;
display: block;
margin: auto;
}
It depends if you want to center it vertically as well or not.
CSS Howto..
Is this the effect that you're going for? http://jsfiddle.net/psLu7/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .outer { border: 1px solid black; } .inner-top { /* float:center; */...
This can be accomplished using the following CSS li { width: 50px; height: 100px; background-color: red; } li img { display: none; } li:hover img { display: block; } You...
Ok I found the solution ... I think I forgot to remove my gloves before starting code ... I put styleCss instead of styleClass ...
Did you want something like this? http://jsfiddle.net/6tE7k/ You can change these: min-height:500px; min-height:100px; to whatever height you need. If you look at it on a fullscreen, you can see it's...
You can try this approach: jsFiddle Instead of using the borders to create the slanted effect, I'm using an :after pseudo element to create it. This allows me to set...
You can't target it like that, but you can do something like this bellow. Basically overwriting the rest with the default. A much better approach would be to have different...
You need to change the display propery of the <h1>, currently it's a block element so will fill the width of the parent div. h1 { border-top: 6px solid black;...
You can do this with bootstrap grid and media queries DEMO @media(min-width: 768px) { .custom-row p { text-align: right; } } @media(max-width: 768px) { .custom-row { text-align: center; } }...
You need to apply -webkit-appearance:none; when adding CSS to select elements in webkit browsers. DEMO http://jsfiddle.net/XxkSC/3830/...
You can use a workaround with text-indent and a background image. Demo. HTML <div id="text"> Lorem ipsum dolor sit amet... </div> CSS #text { background:url(your-image.jpg) top left no-repeat; text-indent:100px; padding-left:20px;...
This would appear to be a bug or not-yet implemented feature. The flex item has no definite size (height in this case), so you cannot resolve a percentage size on...
I'm not suggesting this is the best way, but it works: Start by wrapping your images in list item elements. Add the following class to your CSS: .innerfade li {...
Here you are: JSFiddle. I've solved it with jQuery. Your first "mistake" was to have a false CSS-Selector order. Your glyphicon isn't inside the .collapse class. HTML: <ul> <li data-toggle="collapse"...
set z-index: -9999; for the fill_link class. edited in jsfiddle...
the point the point of these languages (i prefer, however frameworks or extensions) of css is to incorporate your workflow to your css saving you time. How? Let's imagine, that...
Check out this tutorial. I don't know how crossbrowser compatible it is (as it is CSS3), but it achieves the effect you want. HTML: <div> <h2></h2> </div> CSS: div {...
You should use the below setting: p:hover ~ div ~ div { display:none; } This would set the display back to none for all div after the first div following...
Set the top property as 100 - height. Example: <div class="meter red"> <span style="height: 20%; top: 80%;"></span> </div> <div class="meter red"> <span style="height: 60%; top: 40%;"></span> </div> EDIT: I hope...
The trick involves setting position: relative to the parent container .image-container which contains the image. Using display: inline-block will force the parent container to shrink-to-fit the image. You then apply...
You could use CSS3 transform skewY() function with positive value for the parent and negative value for the child wrapper element to achieve the effect. .parent { -webkit-transform: skewY(-5deg); -moz-transform:...
Thanks for the tips Ryan! My solution was: document.addEventListener('WebComponentsReady', function(){ var menu = document.querySelector('paper-menu') var paths = menu.items.map(function(item){ return item.pathname }) window.setInterval(function () { menu.select(paths.indexOf(location.pathname)) }, 100); }) ...
change the css like below .section > div {display: none;} .section > div:target { display: block;} and remove # from id name DEMO...
To use a variable's value in the selector, you should use the interpolation syntax #{} and append the n to it like in the below code block. @mixin counter($number) {...
You can apply these styles to the anchor to make it block-level, assign a width, and then adjust its margins like this: a.read{ display:block; width:100px; margin:0 auto; } Or apply...
Use flex-box if you're only targeting modern browsers else you can do something with css table layout for older browsers. .wrapper {display:table;} .wrapper div {display:table-cell; padding:10px;} @media only screen and...
You can use absolute position as follows: #process { position: absolute; top: calc(50% - 135px); left: calc(50% - 225px); text-align: center; font-family: San-Serif; font-size: 20px; text-shadow: 1px 1px 0 #1a1a1a;...
Either set image as background-image for your :after pseudoelement or remove anything except url(path) from content property. content should contain either a string (or strings) or url of image wrapped...
This can be do by two ways one is by setting value in ViewModel class or by setting value in ViewBag, ViewData or TempData. Way 1) Preffered way Strongly Typed:...
If you are using the select helper, you need an empty options hash followed by your html options like so: select(object, method, choices, options = {}, html_options = {}) With...
You actually don't need width to be "set" here. All the elements in the responsive design have their width. You can just do it around with the following rules: white-space:...