Embed iframe boxed on desktop but full width on mobile
I manage a website for a small hotel and we use a booking system which has an iframe embed code. For the better user experience, we would like to make this full screen on mobile devices and keep boxed on desktop devices. I have already turned on the "boxed to full width" setting in theme options/responsive menu. This did not solve the problem. After that I tried to create two sections: one with full screen and hide for desktop, and one with boxed layout and hide for mobile. In this case, the booking system is not visible. Now I chose to set the layout full screen on every device, but I would like to change this to mobile only.
Do you have any solution for this?
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
Do you use any plugin to that booking system?
If yes, can you tell me the name of this plugin?
thanks
Thank you for your quick response. There is no plugin for this booking system, there is a separate admin page for that on their servers, we have to just embed their specific iframe code. (They need only the exact url of the page)
I send you the link to the website: https://imolaplatan.hu
Thank you in advance.
Hello,
Sorry, but in that case our hands are tied beacause all settings responsible for the size, comes from your iframe and Custom CSS.
These settings are more important then the ones from theme options.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
If you would like to have diferent display for mobile and desktop you should modify this iframe and/or its Custom CSS's.
Thanks