0

I am currently creating a webpart webpage for an user and they want it customized.

For example : They want an image carousel and webparts with tabs. I have figured out everything but i do no how to resize the page according to my needs.

As the image carousel looks really big and i want to apply my own resizing and everything not only to the image carousel but also to webpart zone say header, i want to reduce the header size to say 80% of width so i can fit another webpart in it.

Is this doable? Please respond, any help would be appreciated.
Thank You

0

You can apply your own CSS to the webpart by following this steps :

  1. Click on Edit Page
  2. The ribbon will shows up select Insert tab then click on Webpart
  3. Select Media and content
  4. Select Content Editor Webpart
  5. Edit Webpart then select Edit Source
  6. Put your own CSS code with style tag

<style type="text/css">​ //Code here </style>

  1. Stop Editing and Save the Page

Or

Instead of writing directly your code in Edit source i prefer that you create your own css file and put on it your own code then Link it to your Webpart.

  • yes i kind of know that but resizing is really hard for me and while i am inspecting the id of the element and trying to change it, it is not happening! any help with that ? – jayant khushalani Mar 7 '18 at 10:05
  • Normally it works good, just try for another element, if it still not works please share your css code here. – Youssef Moumen El idrissi Mar 7 '18 at 10:17
  • i tried for my header web part and for my background color but it did no work ! – jayant khushalani Mar 7 '18 at 10:20
0

Easy trick for this -

  • Select the ID of the element that you wish to resize (use chrome or IE debugger tool, assuming that the id is "abc-xyz"
  • Put in your resizing/display CSS code within your existing code appropriately. For illustration - #abc-xyz{ width: 80% !important }
  • Make sure you use the "!important" i your CSS. SharePoint cosmetics behaves weird sometimes, if you skip this.

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.