Widen the answers experience results

[Devon_Smith]

Hi Team,

Is it possible to widen the overall answers experience? The cards on the universal search and some verticals only go as wide as the search bar. Whereas the vertical-map page takes up the entire width of the screen. Is there a reason for this design and why we would not (or could not) change it?

I know we can alter the margins for vertical searches with filters to go beyond the width of the search bar, but can we do the same for just the cards?

Thanks,
Devon

Universal:

Vertical-Map:

[afarooque]

Hi Devon,

You’re always welcome to change the standard styling, just know that if you change it, you’ll need to test across browsers/devices to confirm functionality!

The width of the cards aligns with best practices for easier readability of paragraph-like text - if it’s too wide, it becomes harder for a user to keep track of their place while reading.

However, you can widen the answers container using the variable --hh-answers-container-width in your answers-variables.scss file. This increases the width of both the search bar and the cards themselves.

Hope this helps!

[Devon_Smith]

Hi Amani,

We widened the experience using the -hh-answers-container-width variable and the client loves it. However, It looks like it is causing a breakpoint issue for a tablet search or a collapsed window on desktop. I see there are set variables for breakpoints (ex. $breakpoint-mobile-max), but I am not having success fixing the issue by changing the values of these variables. Do you know how best to go about editing breakpoint widths?

Thanks!

[afarooque]

Hi Devon,

There are a few ways to handle this. If you would like the width to dynamically expand, you can set -hh-answers-container-width to 100%.

When you do this in staging or Live Preview you will see it fill the page like so:

It’s as easy as that.

Another way to do this with how you have it now. where you want to set the width to a value like 1000px, would be as follows:

1. Add an additional variable in your answers-variables.scss file. We can use this to help adjust the mobile responsiveness across different breakpoints.

$breakpoint-custom-min: 1000px;

2. Use media queries to adjust the width of the Answers-container class. You can learn more about media queries here. Here, we’ll redefine the behavior at the existing breakpoint to only fill up to 100% of the width, and define the behavior once the width is greater than your hh-answers-container-width to set the width to that value (in this case, 1000px).

@media (min-width: $breakpoint-mobile-min) {
    .Answers-container {
        width: 100%;
    }
  }

  @media (min-width: $breakpoint-custom-min) {
    .Answers-container {
        width: $breakpoint-custom-min;
    }
  }

Here, you can see how we’re overriding the styling (which would have set the width of the container to 1000px at the 768px breakpoint) to be 100% until we meet the threshold of the new answers-width value.

Let me know if this helps!

[Devon_Smith]

This is so helpful. Thanks Amani!

[henry_kremer]

Hi team,

I am trying to widen my Answers Experience to better fit my client’s site using the steps outlined in this community post and the recent office hours.

I’m just running into an issue where grid layout on universal search isn’t fitting properly (like it does in vertical search).

Vertical Search:

Universal Search:

Are there any additional CSS modifications I can make in my answers.scss file to address this?

Thank you!

[roser]

Hi Henry,

You can fix this by tweaking your scss variables.

1. Navigate to static/scss/answers-variables.scss
2. Do the following:

//add these
  --hh-universal-grid-margin: 8px;
  --hh-universal-grid-three-columns-width: calc(calc(100% - var(--hh-universal-grid-margin) * 6) / 3);
  --hh-universal-grid-two-columns-width: calc(calc(100% - var(--hh-universal-grid-margin) * 4) / 2);
  
//remove these (old variable definition)
  // --hh-universal-grid-three-columns-width: 212px;
  // --hh-universal-grid-two-columns-width: 326px;

I’d confirm your cards still looks good across various breakpoints and browsers. Let us know how it works for you!

Thanks,
Rose