# ESP32-CAM dashboard template - how to adjust width?

**URL:** <https://discourse.nodered.org/t/esp32-cam-dashboard-template-how-to-adjust-width/23637>\
**Category:** Dashboard\
**Created:** [25 March 2020 20:14 UTC](https://discourse.nodered.org/t/esp32-cam-dashboard-template-how-to-adjust-width/23637 "2020-03-25T20:14:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![877](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/877/32/8207_2.png) [@877](https://discourse.nodered.org/u/877)\
**Post date:** [25 March 2020 20:14 UTC](https://discourse.nodered.org/t/esp32-cam-dashboard-template-how-to-adjust-width/23637/1 "2020-03-25T20:14:51Z")

</div>

Hi all,

How can I resize the image so it's full width with no scroll bar?

When I change the width or height it just makes the image taller, and the bottom scroll bar remains.

Thanks

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d680accb8ed34a8320c62d6e5823d48e72974522.jpeg)

```auto
[{"id":"d5d44d03.369d1","type":"ui_template","z":"bec7ca82.7a1ca8","group":"d6c53486.e0b278","name":"","order":7,"width":"0","height":"0","format":"<div style=\"margin-bottom: 10px;\">\n<img src=\"http://192.168.107.12\" height=\"650px\" width=\"650px\">\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":280,"y":300,"wires":[[]]},{"id":"d6c53486.e0b278","type":"ui_group","z":"","name":"ESP32-CAM","tab":"3cc29daa.61f162","disp":true,"width":"6","collapse":false},{"id":"3cc29daa.61f162","type":"ui_tab","z":"","name":"Camera","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![877](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/877/32/8207_2.png) [@877](https://discourse.nodered.org/u/877)\
**Post date:** [25 March 2020 20:16 UTC](https://discourse.nodered.org/t/esp32-cam-dashboard-template-how-to-adjust-width/23637/2 "2020-03-25T20:16:51Z")

</div>

I followed [this guide.](https://randomnerdtutorials.com/esp32-cam-video-streaming-web-server-camera-home-assistant/)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b0cc209a0567a38a2d84d3eb4ded444eb08a35e9.png)

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [25 March 2020 22:11 UTC](https://discourse.nodered.org/t/esp32-cam-dashboard-template-how-to-adjust-width/23637/3 "2020-03-25T22:11:28Z")

</div>

Delete `width="650px"` and `height="650px"` and put `style="width:100%"` ?

See the HTML (and other) bible and do the same to see what's happen :  
`<img src="img_girl.jpg" alt="Girl in a jacket" style="width:100%">`  
[https://www.w3schools.com/html/tryit.asp?filename=tryhtml\_images\_size](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_size)

---

<div class="post-metadata">

**Author:** ![877](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/877/32/8207_2.png) [@877](https://discourse.nodered.org/u/877)\
**Post date:** [26 March 2020 07:37 UTC](https://discourse.nodered.org/t/esp32-cam-dashboard-template-how-to-adjust-width/23637/4 "2020-03-26T07:37:02Z")

</div>

Thank you I will try that 👍🏻

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 April 2020 07:37 UTC](https://discourse.nodered.org/t/esp32-cam-dashboard-template-how-to-adjust-width/23637/5 "2020-04-25T07:37:07Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.