Data Studio
3.9K members online now
3.9K members online now
Ask questions about Data Studio
Guide Me
star_border
Reply

Data Studio Report - responsive / mobile

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

Is there a way for mobile/responsive Reports in Data Studio? 

Data Studio Report - responsive / mobile

Visitor ✭ ✭ ✭
# 2
Visitor ✭ ✭ ✭

I was wondering the same thing. The photos on their home page seem to show mobile optimized reports.

Re: Data Studio Report - responsive / mobile

Explorer ✭ ✭ ☆
# 3
Explorer ✭ ✭ ☆

hi guys, 

 

Data Studio is not really " full responsive " but you can find some settings to made your report much better, like to "fit to width", hide / show the top bar...

 

canvas.PNG

Data Studio Report - responsive / mobile

Visitor ✭ ✭ ✭
# 4
Visitor ✭ ✭ ✭

Hi Patrick, thank you for tip, I'm trying to make responsive reports, Can you tell me if the screen size impacts?

Data Studio Report - responsive / mobile

Visitor ✭ ✭ ✭
# 5
Visitor ✭ ✭ ✭

Hi, you could set a layout with a width about 900px to have a better ergonomics.

 

(sorry for my english!)

Data Studio Report - responsive / mobile

[ Edited ]
Visitor ✭ ✭ ✭
# 6
Visitor ✭ ✭ ✭

This worked somewhat for me but still having trouble on mobile with the date selector. I wrote a blog post about it here.

 

Once you have embedded your dashboard, you can create a custom div class for it. 

 

HTML

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

 

 

Then add the following CSS to your div class. In this case I named the embed div "google-data-studio"

 

CSS

.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%; }

 

Data Studio Report - responsive / mobile

Visitor ✭ ✭ ✭
# 7
Visitor ✭ ✭ ✭

I am trying to embed this is a New Google Site using the Embed Code option. Is this possible? I get the HTML part but where would I put the CSS?