Changing vertical-grid page layout from 3 columns to 2 columns

Search Best Practices - Search Front-End
1

Hey all,

I’m using product-prominentimage cards for 1 vertical, and they look so great in "universalSectionTemplate": "grid-two-columns" that I want to also implement a 2 column layout in their vertical. Is there an easy way to do this? I’m using the vertical-grid page layout but no matter what CSS I update it keeps resetting to the default 3 column layout, so I figured I must be missing something in the json. Please let me know!

2 Likes
2

Hi Hannah,

This is a quick change - no need to use CSS at all!

In the [pageName].html.hbs file for any vertical that was created using the Vertical-Grid template, you should see a line (about halfway through, depending on what theme version) like this:

    <div class="Answers-container Answers-resultsWrapper Hitchhiker-3-columns">

If you update the “3” to “2” in that line, it should make it 2 columns instead of 3! Let us know if that solves it for you or if you have any other questions.

Thanks,
Liz

3 Likes
3

WOW thank you for asking this Hannah and thank you for answering it Liz!! This just saved me so much time!!

1 Like