Three Column Gird Layout in Mobile

Search
1

Hi -

I am using the product prominent image cards and have a three column grid layout. I really want the ability to compare products on mobile (not just desktop) with the 3 columns. I see that when on mobile the columns change to one. Is it possible to support 2-3 columns or is this not recommended for UX? If so, how would I do so?

Thanks!
Alyssa

2

Hi Alyssa,

You can accomplish this by adding the following to your answers.scss file (credit to Christian for this!)

.HitchhikerResultsGridThreeColumns-Card, .HitchhikerResultsGridThreeColumns-Card-placeholder {
    min-width: unset;
}
@media (max-width: 767px) {
  .HitchhikerResultsGridThreeColumns-Card {
    max-width: 50%;
  }
}

If you wanted it to be 50%, you’d update the max-width in that list line to 33.333%. You should also target the vertical as needed.

From a UX standpoint, it depends on your cards and images. Generally, 3 cards on mobile is a bit of a squeeze – it often causes undesirable wrapping and it’s a lot of info to process on a smaller screen. We’d recommend 1 or 2 cards on a mobile breakpoint. Whatever you choose, definitely make sure to test across all breakpoints (there might be additional tweaks you need to make to the card scss itself to get the right wrapping). Let us know how it goes!

Thanks,
Rose

1 Like
3

Hi all,

I added this code snippet to create 2 columns to mobile on an account where I had previously adjusted so that it had 4 columns on desktop (per the instructions in section 3 of this post). I now find that, on desktop, if a search returns a number of cards not divisible by 4, the “extra” at the bottom of the results becomes extra wide (i.e., the width of 2 normal cards).

Any idea why this might be?

Thanks!
Ariana

4

Additionally, are there any additional brackets or semicolons needed in the code snippet above? Writing it exactly as is produces errors in my scss

5

Hi Ariana,

You’re correct we were missing a bracket in that code snippet (now corrected!).

Could you double check that you’re placing the max-width styling in a media query? In other words, the max-width rules should be nested under the @media directive, so it only applies when the the max-width is the mobile breakpoint, like this (I’ve also updated it to reference the breakpoint-mobile-max variable, which should already be in your answers-variables.scss):

@media (max-width: $breakpoint-mobile-max) {
  .HitchhikerResultsGridThreeColumns-Card {
    max-width: 50%;
  }
}

Thanks,
Rose

1 Like