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!