body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.custom-app-wrapper {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 10px 0;
}
.custom-app-container {
position: relative;
width: 100%;
height: 85vh; /* Good height considering right sidebar in Blogger */
min-height: 600px;
border: 1px solid #ddd;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.custom-app-iframe {
width: 100%;
height: 100%;
border: none;
}
/* Mobile responsive */
@media (max-width: 768px) {
.custom-app-container {
height: 90vh;
min-height: 500px;
}
}
// Auto-resize iframe height for better responsiveness
function resizeIframe() {
const container = document.querySelector(‘.custom-app-container’);
container.style.height = window.innerHeight * 0.85 + “px”;
}
window.addEventListener(‘resize’, resizeIframe);
resizeIframe();
