By default, Google Slides won’t look very good when embedded on your responsive site. Fortunately, this issue is very easy to remedy with a bit of HTML & CSS.

The Solution

πŸ‘‰ Heads up! There’s a easier & more modern solution using only CSS here.

Just wrap the Google Slides embed code in a <div> with a CSS class of .google-slides-container

<div class="google-slides-container">
	[Your Google Slides Embed iFrame Code]

Then add these two CSS classes to make your embedded slides scale in proportion with your viewport window.

    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;

.google-slides-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

The padding-top property of the .google-slides-container CSS class will change the proportions of the embed. Feel free to modify & tweak it.


Resize your browser window to see this embedded Google Slides presentation scale to fit your window.