I'm using SharePoint online and the SharePoint designer does not have a visual interface like in on-prem . I need to be able to get the web part id to edit the css and make the width smaller.

How do I search for the id?

1 Answer 1


You can use the Developer tools in your browser for that.

Open the page in your browser and hit F12. In IE (other browsers work similar) go to the tab 'DOM Explorer'. In the upper left corner you will find an icon with a box and an arrow. Click it once and then hover your mouse over the web part in question and click again. This will open the corresponding node in the DOM Explorer. From there on it should be easy to find the ID of the element containing your webpart.

  • Thanks Daniel, I did and got the div id named ms-rte-layoutszone-inner and added the below css in the script editor #ms-rte-layoutszone-inner { width: 40px; overflow: auto; } some how i cant get the size any smaller
    – Rinu
    Jul 18, 2016 at 7:35
  • Which layout are you using and which zone do you want to reduce to which size? Jul 18, 2016 at 7:48
  • i am using 3 vertical once i want to reduce the middle one
    – Rinu
    Jul 18, 2016 at 9:55
  • The ms-rte-layoutszone-inner is surrounded by a TR with class ms-wiki-columnSpacing which has quite a bit of padding. You would have to reduce/remove that padding to reduce the width further. Jul 18, 2016 at 10:03
  • Tried it , thats not it see the code i used below <script> #ms-wiki-columnSpacing{ width: 40px; overflow: auto; } </script>
    – Rinu
    Jul 19, 2016 at 5:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.