I used the following code to embed a google map at www.tastysfreshburgersandfries.com/locations but there are white bars above and below it and I can't seem to figure out how to remove them. Any help with fixing that would be great.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3431.7169822552632!2d-81.45959308200993!3d30.670097134060587!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e4fee54019994b%3A0xbe6be3a817d34edf!2sTasty's+Fresh+Burgers+and+Fries!5e0!3m2!1sen!2sus!4v1476217073308" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
.wpb_content_element { margin-bottom: 35px}, you can play with it and also, .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner { padding-top: 35px; } that also needs to be changed.
But I would suggest you to create a separate class and apply it instead of messing with existing CSS styles, as I can see its from other framework.
You have padding on the row that has the iframe (it isn't the iframe which generates the white bars). Look this
I can figure you are using Visual Composer. First do a click on the pencil who is in the upper right corner of the row to see the Row Settings.
Then go to Design Options tab, and check what values do you have on the padding section.
Related
I am preparing now custom home page to my browser. I would like to few divs displays my favorite websites. However, since I do not have lots of space, I would like to display only the small fragments, with major sections. Is there a way to put excerpts with HTML? I mean the display, for example, to google put in a frame displaying only google-doodle and bar display (shift of tens of pixels to the right and down). I using this code, but i can't add right and down shift :
<iframe src="http://www.google.com" style="width: 90%; height: 300px"></iframe>
I will be grateful for any advice.
Warning : Google website it's only examples. I need to put in a few divs completely different pages. I am not concerned here with a static screenshot, but about full-working piece of the pages.
I make a graphic depicting what I mean :
I've created a jsfiddle with - what I believe is - what you're looking for: http://jsfiddle.net/ctwheels/3g47mjtk/
Set the width and height of iframe to the webpage size and then clip it down to the size you want. You can remove scrolling="no" in the iframe tag if you'd like.
HTML
<div id="outerdiv">
<div id="innerdiv">
<iframe width="600" height="660" src="http://www.wikipedia.org" scrolling="no" frameborder="0"></iframe>
</div>
</div>
<p>Set #outerdiv to size of #innerdiv. Blue background is so you can see what has happened to the iframe</p>
CSS
#outerdiv {
position: relative;
width:300px;
height:300px;
background-color:blue;
}
#innerdiv {
position: absolute;
top:-160px;
left:-200px;
clip:rect(160px 400px 360px 200px);
}
If Chrome is your browser, then I believe there's functionality to get screenshots/snapshots of your favorite websites built into its extensions business (which is really just lots of javascript and stuffs). Might want to look into creating an extension for Chrome that becomes your default/new-tab business (there are already a bunch out there in the Chrome Store).
I am trying to show a particular location by embedding a Google map to my site using Maps Engine Lite. However I get this black bar (with the text Untitled Map as shown below) at the top of the map which I need to get rid of. Any ideas how to proceed with this -
There are no implemented options to hide the bar, but it could be done via CSS.
example assuming a desired iframe-size of 580x160
<div style="height:160px;display:inline-block;overflow:hidden;border:1px solid #000">
<iframe style="position:relative;top:-27px; border:none;"
src="/path/to/embedmap"
width="580" height="187"></iframe>
</div>
The iframe is wrapped in a div with a height set to the desired height. The height of the iframe is set to the desired height +27px . Via top:-27px; the iframe will be moved 27px upwards, the bar disappears.
I'm creating a custom Facebook tab using IFRAME, but for some odd reason this weird border refuses to go away. I've tried the following:
table, th, td
{
border: 0px;
}
frameborder="0" in the iframe attributes.
and all sorts of CSS attempts. The border just won't go away.
The chrome inspection tool shows the following:
(user agent stylesheet)
table {
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
I have not included that style anywhere in my code. Is there anything I can do to fix this, or is this some kind of Facebook required tab feature? If the border must be there, can I at least have it evenly on all sides?! Hahah.
Refer to this page to see the issue: https://www.facebook.com/hitejinro?sk=app_190322544333196&app_data=visitor_mode
This is what it looks on my end: http://i.imgur.com/HJIUp69.jpg
Thanks for reading.
Border is coming from iframe. Your iframe tag doesn't seem to be well formed. change it to
<iframe src="http://spuxystudios.com/adwell/psy/index.html" width="850" frameborder="0" height="1900px">....</iframe>
Currently it is:
<iframe src="http://spuxystudios.com/adwell/psy/index.html" width="850″ frameborder=" 0" height="1900px"></iframe>
See there is a quote mismatch on width.
Make a frame by changing the start of the cut.
I want to insert a html code but make an indentation so that it appears only part of the picture.
I use the code below but I want to change the start point of the cropping frame. When I use this code it starts the cut in point 0.0 and would like to start at a different point.
Code:
<div style="width:430px; height:300px; overflow:hidden;">
<iframe width="530" height="400" frameborder="0" scrolling="no" src="https://skydrive.live.com/embed?cid…
</div>
I don't know if I understand you correctly, but it seems that you only want to show a part on an image, right? Maybe the CSS-property "clip" can help you.
In my page I have a frame .I need to design the frame independently and just place it in my page.I does not want to specify the frames style in the page where it included.But in the frame's style sheet.
I desinged the frame as follows
http://jsfiddle.net/Hf2pR/
In my page I included the frame as follows
http://jsfiddle.net/9Lckh/
The problem is that the width of the frame is not 20% (I specified 20%).
How to solve this?
How to independently design a frame and use it by just including it?
Hey you can define your iframe width properties as like this
<iframe class ='cLeft' src = './leftPanel.html' FRAMEBORDER="0" SCROLLING="yes" width="20%">
</iframe>
Live Demo
http://jsfiddle.net/9Lckh/1/
or This
iframe
{
border:none !important;
width:20%;
}