Forum Discussion
Web Page Responsiveness as a Web Object
Hi all! I have a responsive web page that I've embedded into a Storyline 360 course as a web object. Unfortunately, the web page loses it's responsiveness as a web object making it a particularly poor experience on mobile.
Has anyone found a solution or workaround to keep web page responsiveness when embedding as a web object?
- Jürgen_Schoene_Community Member
add this small javascript on the slide with your web object
if( window.cssPatchWebObject !== "done") {
style = document.createElement('style');
style.textContent = `
.webobject {
width: 100% !important;
height: 100% !important;
transform: none !important;
};`
document.body.appendChild(style);
window.cssPatchWebObject = "done";
}but you cannot change the fixed aspect ratio of the slides
result
https://360.articulate.com/review/content/0aed99ad-6845-4ced-8d78-c539db191b7b/review- JessicaDobbs-36Community Member
This is exactly what I needed. Thanks Jürgen Schoenemeyer!
- TSUITCommunity Member
is there anyway if we could change the ratio of the slides by javascript when the page is being rescale now?
- Jürgen_Schoene_Community Member
my Javascript/css patch is no longer necessary - the function is now implemented direct in storyline (3.78, ...)
deactivate "Scale with slide"
- JackBranum-0d94Community Member
Jurgen, many thanks for the follow up.
Jack P. Branum
Founder & Principal Creative
Bluegrass Learning Solutions
859.472.4292
bluegrasslearningsolutions.com
- JackBranum-ce94Community Member
Thank you, Jurgen. This saved me hours of frustration.
Glad that Jürgen was able to help you, Jack! Thanks so much, Jürgen! 👏
I just wanted to add a quick note: it looks like your signature came through when you replied via email. You can remove it by clicking ‘Edit’ below your response. Here’s a quick Peek 360 video if you need help.
Have a great day!