as you can see it has a small issue, ive been able to fix this by increasing the padding-bottom: amount
I s there a auto option, this will only work as long as the padding-bottom abount is more then the space needed and ive not even tried to see what it would look like on other screens
When you post code on a page, please put three backticks on a line by themselves above the code, and three backticks on a line by themselves after the code. Like this:
```
your html and CSS here
```
If you have not read out posting guidelines, yet, please do so here: Forum Posting Basics
I would like to see a screen shot or drawing that shows the imbedded iframe on the page with your Wordpress site. I cannot tell from the above image or from your code how it is supposed to fit on the page. I cannot see that it has a small issue because I cannot see the overall page.
It would be most helpful if your code were posted in the format of a “working page”. One that starts with <doctype and ends with </html> and includes enough CSS and HTML to demonstrate the issue.
If you cannot post a working page, then a link to the site along with a clear description of the problem would probably do.
A very basic guess…
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/responsive-iframe-help-needed-please/214453
2012
Feb 4,2016 10:45 PM
-->
<style type="text/css">
body {
padding:0;
margin:0;
}
iframe {
display:block;
width:90%; /* as desired */
height:50vh; /* as desired */
border:none;
margin:0px auto
}
</style>
</head>
<body>
<div class="yourcontent">
<p>Your website's content preceeds the iframe</p>
<p>Your website's content preceeds the iframe</p>
<p>Your website's content preceeds the iframe</p>
<p>Your website's content preceeds the iframe</p>
<p>Your website's content preceeds the iframe</p>
<p>Your website's content preceeds the iframe</p>
<p>Your website's content preceeds the iframe</p>
<p>Your website's content preceeds the iframe</p>
<p>Your website's content preceeds the iframe</p>
<p>Your website's content preceeds the iframe</p>
<p>Your website's content preceeds the iframe</p>
</div>
<iframe src="https://www.sitepoint.com/"></iframe>
</body>
</html>
I do not believe that you need positioned elements. Notice that my demo does not have any positioned elements and the iframe stays in the flow of the page.
position:absolute removes the element from the flow of the page.
iframes are supposed to generate scrollbars if the content of the iframe exceeds the dimenstions of the iframe. In the full page view, the contents of the iframe appear to fit within the iframe properly. In the narrow width vew, the contents are cut off at the bottom of the page and no scroll bar is shown.
Are you thinking that adding padding to the bottom of the parent container will somehow push the iframe up so the user can see the rest of the contents of the iframe?
I do not understand what the padding is supposed to do. What are you thinking?
Please describe the “small issue” and please explain why you believe padding-bottom will help.
I believe that the problem is that iframes do not behave the way you imagine they behave. The dimensions of an iframe are not dependent on the content of the iframe. You have to make a best guess of the size of the content and the space you wish to allow for that content and draw your iframe accordingly. If needed, the iframe should be allowed to sprout scrollbars. An iframe will not stretch longer because the content of the iframe becomes longer at narrow widths. An iframe is just a window with a fixed frame.
iwith a few changes its working better then before, I dont see the scroll bar in the full view now only in the narrow view .[quote=“ronpat, post:7, topic:214453”]
Please describe the “small issue” and please explain why you believe padding-bottom will help.
[/quote]
the green box shows the issue, only half of the page is shown in the narrow view.
Your web page does not know how wide or tall the content in the iframe is. The content of the iframe cannot affect the dimensions of the iframe. The content can only trigger a scrollbar on the iframe.
That’s what I would do.
Style both so they look like they go together. i.e. same color scheme. same logos, same menus, common header, common footer, etc.
Likely to take a bit of work, and some compromise will be needed for some things, but AFAIK that’s how it’s usually done.
As for making blog visitors aware of the forum, I think some type of “last post” or “top post” widget would help.
I think you could re-use a lot of the values. But the selectors would need to be different.
That is, the tags, classes and ids in the forum HTML and blog HTML will surely be different.
But it should be relatively easy to have them both use the same color scheme, border styles, fonts etc.
I wouldn’t mess with much more than that at first though. Then once you’re happy with that, save back-up copies and experiment with changing the HTML - layout, margins, padding etc.
Or leave that alone, and work at getting both to have a common header, footer, and “universal” nav links.
By universal, I mean “cross links”. The forum will have links specific to the forum, and so will the blog. But a few eg. Home, Forum, Blog, About, etc. could apply to both.