# CSS control plotly offline

**URL:** <https://community.plotly.com/t/css-control-plotly-offline/1255>\
**Category:** Plotly Fundamentals\
**Created:** [June 9, 2016, 1:10pm UTC](https://community.plotly.com/t/css-control-plotly-offline/1255 "2016-06-09T13:10:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![greggshao](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@greggshao](https://community.plotly.com/u/greggshao)\
**Post date:** [June 9, 2016, 1:10pm UTC](https://community.plotly.com/t/css-control-plotly-offline/1255/1 "2016-06-09T13:10:08Z")

</div>

I am trying to use CSS style control the graph, but when I change the width and height to below 27% the values of Y axis changed and looks really ugly (it seems for me it has lots of space on the Y axis but those values just stick together, any idea? Thanks!

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [June 9, 2016, 4:17pm UTC](https://community.plotly.com/t/css-control-plotly-offline/1255/2 "2016-06-09T16:17:03Z")

</div>

Hmm. Our autotick routine should recompute tick spacing based on the available height.

Would you mind sharing a code snippet of your work to help us debug?

---

<div class="post-metadata">

**Author:** ![greggshao](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@greggshao](https://community.plotly.com/u/greggshao)\
**Post date:** [June 9, 2016, 4:30pm UTC](https://community.plotly.com/t/css-control-plotly-offline/1255/4 "2016-06-09T16:30:19Z")

</div>

```
<html>
<style>
{% for a,b,c,d in z %}
.hello {

  width:{{b.row}}%;
  height:{{b.column}}%;

}
{% endfor %}
</style>

<body>
{% for a in params2 %}
<div class="hello" >{% include a.HTMLFileName %}</div>
{% endfor %}
</body>

<script>
window.onload=function(){
  {% for a,b,c,d in z %}
 var HTMLFileName="{{a.HTMLFileName}}"
 var gridRow="{{b.row}}"
 var gridColumn="{{b.column}}"
 var graphRow="{{c.graphRow}}"
 var graphColumn="{{c.graphColumn}}"
 // var divTag=document.getElementsByClassName("hello");
 // divTag[0].style.width="500px"
{% endfor %}
}

</script>

</html>
```

---

<div class="post-metadata">

**Author:** ![greggshao](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@greggshao](https://community.plotly.com/u/greggshao)\
**Post date:** [June 9, 2016, 4:38pm UTC](https://community.plotly.com/t/css-control-plotly-offline/1255/5 "2016-06-09T16:38:19Z")

</div>

I looked through the graph on html carefully, when I do the % on width and height, it also change something under which is I don’t want.  
 ![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/1X/ed296d8787fea4b54815c516a56627fd182f152f.png)  
The graph I use is 25% by 25%

For me it still have lots of space for the graph, but it shrink the axis and values on the graph too much.