Give iFrame maximum space

You are hiding the #sidebar but for the #content you don’t have any settings at all.

You have to remove any margins, widths from each element which does restrict the width. like
.section-inner
and also a padding of 10% in one of the inner elements.

to your 2nd thing. For your first problem see above. But for a real responsive solution please see here:
https://www.tinywebgallery.com/blog/responsive-iframes-with-advanced-iframe-pro

Thanks, I have made a little progress in that I was able to remove the header.
I cannot make the margins, padding etc dissapear, however.
I have tried as content-id: #wrapper.section.medium-padding, #section-inner, #content.full-width, #post. All of them give exactly the same result, which is what you see now.
I also have no idea how to set padding and margins to 0.
Currently I have:
Hide elements: #sidebar,.post-header
content-id: #wrapper.section.media-padding|#section-inner|#content.full-width|#post
content styles: padding:0|width:1758.89|width:1758.89|width:1758.89
But nothing changes when I put that, or anything else.
So I’m still stuck.
Thanks again,

Peter

How is you css knowledge?

because e.g. a class has to be defined with “.section-inner” # are for ids. you can check my working examples
https://www.tinywebgallery.com/blog/advanced-iframe/demo-advanced-iframe-2-0

width:1758.89 is also not valid -> width:1758px

Thanks for your patience. My knowledge of css is virtually non-existent. I only copy-paste other people’s code and hope for the best. I find it very hard to understand. In any case, I’m learning today.
Right now things look a bit better on desktop. But I still cannot figure out how to make the iFrame use the entire middle block without the margins.
Also, on iPad it is now an even worse mess than it was before. The iFrame is almost twice as large as the header and footer so everything is out of proportion. I suppose this has to do with the fact that I can’t make it responsive when I am using absolute width values and not relative values.
Now I have:
Hide elements: #sidebar,.post-header
content-id: .wrapper.section.media-padding|.section-inner|.content.full-width|.post
content styles: padding:0|width:1583|width:1583|width:1583

Thanks,
Peter

No – you would really need to check each attribute and which css styles are applied there. And than you need to know which ones to change.

Best is to use chrome and simply use f12 to inspect the page. on the right you see the css styles. There you can directly modify them and see what the result would be. And then only remember the styles you modified and add them to the config of the plugin.

If you still need more help please post again. I’ll can take a look then in more details as well.

.section-inner for example you need to set e.g. a width of 100% and also always look at the max-width values.

My plugin can change all of them dynamically if allowed.

Best, Michael

Actually, I am using Chrome to inspect the code – (yes, it is that bad) ??
So let’s spell out what I see and what I should code. Maybe other absolute beginners will be helped by this exercise also.
These are the elements I currently see in the middle section of my page:

class: wrapper.section.medium-padding, set at 1758.89px width
class: section.inner, set at 1582.99px width
class: content.full-width, set at 1582.99px width
class: post, set at 1582.99px width
class: post-content, set at 1582.99px width

So, I decided I should put in Content id:
.wrapper.section.media-padding|.section-inner|.content.full-width|.post|.post-content

And in Content styles:
width:100%;padding-left:0px;padding-right:0px|width:100%;padding-left:0px;padding-right:0px|width:100%;padding-left:0px;padding-right:0px|width:100%;padding-left:0px;padding-right:0px|width:100%;padding-left:0px;padding-right:0px

And now I am even more confused.. Everything stays the same, but the header has come back (?). But I still have it at Hide elements:
#sidebar,.post-header

Sorry, I feel really clumsy.
Really appreciate your help.

Peter

I did it! – on the desktop that is. On iPad not quite right still.

Hide elements: #sidebar,.post-header,.dvk-social-sharing
Content id: .wrapper.section.medium-padding|.section-inner|.post-content
Content styles: padding:0|max-width:100%;width:1758px|padding:0%

On the iPad there is still padding to the left so it walks off the screen on the right and at the bottom.

I could use another bit of advice on that.

Thanks again,

Peter

the content you include has a static size – the grey border is inside the iframe. So the only way to get rid of this is using:

https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe#e5

there you can cut away elements inside the iframe even when you don’t have access. But this a feature of the pro version.

then you also can use
https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-only-a-part-of-the-iframe/show-only-a-part-of-an-iframe-zoom#e39

There the content is zoomed if it does not fit. Try the page e.g. with you mobile phone.

Best, Michael

I think I did it: https://www.fasol.nl/oorlogsdagboek-bestellen/
iPad looks fine now. For the mobile phone visitors I included a link to the original external url.
Thanks very much for your help!

Case closed!

Peter

Great ;).