0

I have a web part that has a blue background and would like to see if there is a way to shorten the width. Below is my css

#WebPartWPQ4_ChromeTitle h2 {
    background-color: #2a8dd4;
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 10px 5px;
    padding: 3px 3px;
    font-size: 15px;
}
#WebPartWPQ4_ChromeTitle h2 span {
    color: #fff;
}

enter image description here

1

You could try adding display:inline-block to your h2 like this:

#WebPartWPQ4_ChromeTitle h2 {
    background-color: #2a8dd4;
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 10px 5px;
    padding: 3px 3px;
    font-size: 15px;
    display:inline-block;
}
#WebPartWPQ4_ChromeTitle h2 span {
    color: #fff;
}

H2 is a block level element by default and will take up 100% of it's parent's width. Making it inline-block changes it's width to auto.

  • Thank you @Mike Lutge, I guess a little more thinking on my part would've led me here. I did add the width property in order for the title lengths to be uniform. – Flat Banana May 25 '17 at 12:30
0

You can try moving your web part to the different zone.

  1. Edit page
  2. Edit web part properties
  3. Go to "Layout" section and change the Zone to which one fits for your web part.

or If you still wants to change the web part width use below CSS

#WebPartWPQ4 {
   max-width: 500px; //width: 50%;
}
  • I'd go with max-width to not have a fixed width. Equally it'd probably be useful to add min-width. – moe May 23 '17 at 21:10
  • Yes. You are right. – Venkat Konjeti May 23 '17 at 21:30
  • This is on my team site homepage and I would rather not have to redo the page to correct the layout. With your suggestion above, it simply centered my title along with the blue. – Flat Banana May 24 '17 at 12:33
  • The above style has been tested before posted. I am not sure any of your page styles impacting this. – Venkat Konjeti May 24 '17 at 12:49

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.