Shorten Web Part Title

Question

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;
}

Answer 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.

Answer 2

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%;
}