How To Make Embedded Google Data Studio Dashboards Responsive and Mobile Friendly

I was attempting to embed a Google Data Studio dashboard on my website when I noticed it looked great on desktop but not so great on mobile. To my knowledge Google Data Studio dashboards are not fully responsive but a little CSS can help once embedded on your website. The instructions below is assuming you can inject and customize your code on your website. I currently use Squarespace - so I was able to add a "Code" block to first embed my Google Data Studio Dashboard, rename the div container, and then add custom responsive CSS. I am not a developer and not sure how to even teach someone how to do this but maybe this will help somebody. 

 

Step 1

  • Wrap your Google Data Studio embed code with a <div>

 

Step 2

  • Name your div class whatever you would like. I have named my div google-data-studio, as seen below:

<div class="google-data-studio">
<iframe width="500" height="900" src="https://datastudio.google.com/embed/..........." 
frameborder="0" 
style="border:0" allowfullscreen>
</iframe></div>

*src= should be your own Data Studio embed URL*

 

Step 3

  • Copy and paste the below CSS to your style sheet - the bolded text should be what you have named your div.

.google-data-studio {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.google-data-studio iframe,
.google-data-studio object,
.google-data-studio embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

That should be it - now your Google Data Studio dashboards will be responsive and more mobile friendly. I am still having trouble with the date selector on mobile.

If you would like to see what my embedded Google Data Studio dashboard looks like, please see here!