patrickpelayo

Thank you for the review, and you are very welcome for the plugin.

Sounds like it could be a caching issue.
Try refreshing your browser cache by holding shift and then hitting f5. Try ctrl+f5 as well. Do this on the edit page where you would normally create posts and use the plugin.

Most browsers will clear the cache doing that.
Let me know if this solves the issue.

It is below the iframe settings where you set site url,width,height,scroll bar, and etc.

It says Advanced. Expand Advanced and you can add breakpoints. I also added the max width setting under other options.

Thank you for your patience.
I just updated the plugin to include under the advanced settings the ability to include breakpoints.

This update shouldn’t break anything, but after updating check your other posts using the Responsive Iframe plugin to make sure they appear fine.

The breakpoints will trigger at and below the specified Breakpoint Width.

So an example would be

• BreakPoint 1 for labtops BreakPoint Width 1280px, Site Width the width you want displayed.
• BreakPoint 2 for tablets BreakPoint Width 1024px, Site Width the width you want displayed.
• BreakPoint 3 for smartphones BreakPoint Width 600px, Site Width the width you want displayed.

Breakpoint 1 will trigger between 1025px-1280px.
Breakpoint 2 will trigger between 601px-1024px.
Breakpoint 3 will trigger 600px and below.

I recommend using the developer tools in your browser to view the appearance of the content at different screen widths to make sure things look the way you want.

• This reply was modified 3 years, 4 months ago by patrickpelayo.

Glad you were able to get it working.
I see what is going on and why the iframe looks like desktop when in mobile.
I didn’t account for the case when the website being iframe has a mobile and desktop view.

I should be able to add into advanced settings options to trigger different width’s of the website dependent on screen width as a solution to this.

Will take me about a week to implement this with my current schedule.
Thank you very much for bringing this to my attention.

A tip I would recommend is to use your browser tools to view your website at different widths when developing. It is usually f12 to access these tools.

Chrome instructions here, but other major browsers have their own tools.
https://developer.chrome.com/docs/devtools/device-mode/

The process for inserting the iframe is the same way for pages as it is for blogs. It is inserted directly as a Gutenberg block.

I notice a bunch of _ngcontent in your html. Are you using a page builder or other framework to build your pages?

You are welcome, I am glad the solution worked out for you.

Thank you for waiting.
I updated the plugin.
It now has in the Advanced section of the settings a max width setting in px.

This disables the scaling setting when enabled, but it provides much better results for responsiveness.

Using your example page, enter 580 into max width for that example page and the iframe banner should align perfectly with the box below.

Let me know if this update resolves the issue for you.

Thank you for the feedback. I greatly appreciate it as it lets me find ways to improve my work. I made this plugin primarily for myself, and without feedback I won’t know what other people need out of it.

I see what you need now. This is happening because the iframe is resized to 100% of its parent width, which is in this case the entire page for desktop. Something I didn’t account for.

Give me a few days(I got tomorrow off from work) and I should be able to add in a max-width setting for the plugin to overcome this issue.

Thank you again for mentioning this issue, and I am happy that you find the plugin helpful.

Thank you for posting.
I am not sure what you mean by keeping same iframe size for desktop without zooming.

The iframe element at 100% scaling will resize itself to be the full width of its parent container.

Can you point me to an example page so that I can see what is going on?

You are welcome Antonio.

Yes you can continue to use “personal link” with the plugin. The plugin does nothing with the menus.

I reviewed the file. It looks like the problem is a theme issue and not the plugin.

I just tested the widget inside a page in the 2021 theme that comes with WordPress. Worked fine.
I noticed all your links are “personal link” in your menu list. Have you been able to get any of your other pages to work outside of “personal link” in that menu?

I am still happy to help even if this isn’t a Widget issue.

You are welcome Antonio.

Email it to
[email protected]

Or you can put it on drop box and share the link.

https://www.dropbox.com/

It is cool. I am new to publishing plugins on www.ads-software.com. The only way we get better at this stuff is by asking questions and practice.

I am happy to help. I don’t exactly know what is going on from your end.
Can you snap an image of what the problem is so that I can have a better idea of the problem?

If you have windows you can use the snipping tool to grab an image of the screen. Just open the start menu and type “snipping tool” and then use that to grab from the screen the problem.

https://support.microsoft.com/en-us/windows/use-snipping-tool-to-capture-screenshots-00246869-1843-655f-f220-97299b865f6b

Then upload it to a image sharing site.
This site would probably work fine. No sign up required.
https://imgbb.com/