I have a client who’s interested in changing the vertical-map layout from 50/50 to either a different ratio (40/60) or a max-width on the results column so that on wider desktop screens only the map expands to avoid extra white space on the location teasers.
I thought adding
.AnswersVerticalMap .Answers-resultsColumn { max-width: 650px; }
to the answers.scss
would do the trick but the live preview isn’t updating with that change and in inspector the map seems to also have a fixed width and leaves white space on the right. Can I get some help on this? Thank you!
I realize now that most (if not all) live experiences that integrate via JS Snippet are confined within the yxtPage-wrapper. Can we expect all answers experiences to look like that instead of being full-width?
Hi Hannah,
Great question – currently the theme has the map default at width: 50%. To see that you can go to:
themes > answers-hitchhiker-theme > static > scss > templates > vertical-map.scss or by inspecting the page and hovering over the map field.
You can adjust this to 60% if you would like to by adding the following to your answers.scss file:
.AnswersVerticalMap .Answers-map {
width: 60%;
}
As always, be sure to QA and check this adjustment against all breakpoints and broswers!
Thanks,
Alyssa
Thank you @Alyssa_Hubbard for directing me to the default value in the theme! I ended up using that and modifying it (with some coding help of course 
).
I used Jambo commands to override themes > hitchhiker-theme > static > scss > answers > templates > vertical-map.scss and under &-resultsColumn added @include bpgte(lg) { width: 650px; } so that at smaller breakpoints the 50/50 ratio would stay the same, but at large breakpoints the results column would have a fixed width of 650px. Then under the &-map section, added @include bpgte(lg) { width: calc(100% - 650px); } so that at large breakpoints the width of the map would be the full-width minus the width of the results column.
The changes look great! Excited to pass it on to the client.
