Width of Zone on Search page

Question

The SP Search page has only 1 zone. I used DOM Explorer to find its id is MainZone. I added some script to the page via Snippet Web Part:

#MainZone{width:800px;overflow:auto;}

It does nothing. Any suggestion how to make it work?

Answer 1

This is something that I use in day to day implementations, may not be the best approach out there but is a dirty fix :)

---

If the top level container doesn't allow applying of css. It means one of the children containers have their own CSS that overrides the top level css.

Press f12 > developer options > select the element container that you want to apply css. Add the relevent styling (like width: 100px) in the element.style. If the style doesnt apply, then continue iterating into the children containers, until it does apply.

Below is an example :-

[

Answer 2

Changing the WP area probably works just as you are doing it, but it doesn't affect the content inside the WP which has its own defined width preferences. In addition to adjusting the width of the WP area, you'll want to do the same for the search item, and for the search item's body text. As mentioned, these have a pre-defined styling, so the changes also need to be forced with a !Important as follows:

.ms-srch-item, .ms-srch-item-body {
    width: 800px !Important;
}