Small Response Window in Google Sites' iFrame Element

Ask the Community General Questions
1

  • Issue description: Google Sites is very basic. As such, it doesn’t offer options for the user to adjust their element to work better with an embedded object, such as an iframe. They also don’t have visibility options based on screen size. So, my Elfsight widget has to be about five times too tall on my website to allow the chatbot responses to be seen on a mobile device. It seems that custom CSS only goes so far to remedy the problem. I know this is mostly an issue of Google not providing more control, but I wish there were a way to make better adjustments from the widget end of things.

  • This is the CSS code Customer Support provided. It made no difference. I eventually dropped the Bottom to 0px and gained a little space. No matter what I did with the element size on my Google Site, it did not affect my mobile display.

  • @media (width <= 480px) {
.es-window-container {
position: fixed;
inset: unset;
bottom: 84px !important;
left: 8px !important;
width: calc(100vw - 16px);
height: 500px !important;
border-radius: 16px;
}
}

  • Frustrated, trial and error led to the following code to at least allow the iframe to respond to the changes in element height on Google Sites. My visitors to the pc version have to deal with a huge blank area of white before they get to the bot, but it’s the trade-off I had to accept, so it was usable on a mobile device:

.elfsight-center-flex { display: flex; justify-content: center; align-items: center; width: 100%; }
2 Likes
3

Hi there, @NRV_Wayfinder :waving_hand:

We’ve double-checked things and, unfortunately, there is no way to implement a neat display on mobile devices through the CSS code. I am sorry :pensive_face:

The only possible solution is to increase the widget’s height in the desktop view to improve the mobile display. However, this might create some extra blank space above or below the widget on desktop.

Check this article for more details: How to remove extra mobile scrollbars on Google Sites.

1 Like