My scenario : Preety simple case where i have a banner image at the top of the page and trying to resize the image to fill the left and right section instead of the default white space. I have been able to resize the image using static width size but when i try to use width:100% it doesn't work. Right now i cannot make my image responsive.

I am using a modern team site.


To customize the banner image in a modern page, you can download and deploy the react script editor web part to the site, and add react script editor web part to the modern page, then add the CSS code into this web part to adjust(resize) the spaces. Do the following steps:

  1. Add The Script Editor Webpart back to SharePoint Modern Experience:


  1. Add below CSS script into the Script Editor Webpart to resize your image(you need to use F12 to find the ID of your banner image):


        height:60px !important;
        width:100px !important;


| improve this answer | |
  • MSFT this is exactly what am trying to do. i figure out that the image is found in a container. and i need to change the size of the container and of the image for it to work – Keshav Taurah Jan 7 '19 at 9:24
  • Yes, currently we cannot directly resize the container in modern page, so we need to use above web part. If you think my suggestion is helpful, you could accept it as an answer. – imp. MSFT Jan 7 '19 at 9:30
  • MSFT i am trying to make the css responsive. for example am moving an image to act like a webpart icon,doyou have an idea how this work? – Keshav Taurah Jan 7 '19 at 11:10
  • just directly add code into the react script editor web part. – imp. MSFT Jan 8 '19 at 1:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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