Answers Container too Small on Client's Website

Search Best Practices - Search Front-End
1

Hi Team,

I recently noticed my client’s locations vertical has suddenly become too narrow - and so the map in the right column no longer appears. I believe this has something to do with the container that I’ve highlighted using the selector tool in the screenshot below (.col-sm-8)

image
image1909×998 101 KB

I just played around with the class, making width: 100% - which seems to do the trick. Sorry if the answer is obvious here but is this something we can control without the client’s involvement? Or is this class something specific to the client’s website.

image
image1853×1040 252 KB

Best,
Luc

2

Hi Luc,

Yes, you can set the Answers container width to 100% by setting -hh-answers-container-width to 100%. If you’d rather set the width to a specific value, you’ll have to consider breakpoints. You can learn more in this Community post and this Office Hours recording.

3

Hey Kristy,

Won’t that increase the width of my search bar as well to all the way across the screen? I would only want the contents below to stretch farther.

image
image1920×468 8.75 KB

4

@Kristy_Huang any thoughts on this? I have another client that is asking the same thing (wants to get rid of the dead space by enabling the 100% width) but I wouldn’t necessarily want the answers search bar itself to take up the entire width of the screen - just the component below.

5

Hi Luc,

You can add an extra rule (to your answers.scss file) to target the width of the search bar and nav. It would look something like this:

.Answers-navWrapper {
  .Answers-container {
     max-width: 80%
  }
}

I would also recommend adding breakpoints, so the search bar and nav remain full width on mobile. Let us know if that works for you!

Thanks,
Rose