Distance between stacked columns on mobile

Anonymous

#258130

Hi, I’m using the horizontal filters. They’re looking great on the desktop, but when they’re stacked on top of each other on mobile they’re to close to each other. Is it possible to give the first column some margin on the bottom, say 25px, but only on mobile?

Best regards, Haiko.

Anonymous

#258131

This reply has been marked as private.

Trevor

#258235

Change the CSS you used to make it horizontal to this:

@media only screen and (min-width: 815px) {
  .searchandfilter > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0px 40px 0px 0px;
  }
}

Anonymous

#258346

Hi Trevor, thanks for your quick reply.

I’ve tried the code, but didn’t see anything different from before.
It looks like it’s the same as the code I’m using now, except the media only part. I tried changing the value of the padding, but that didn’t help.

I’ve added 2 images to show what I’m trying to do.
Before
After

So only on mobile, I would like to add some space before the heading ‘Kies thema’.

Best regards, Haiko.

Trevor

#258413

Looking at the website, I can see still the old CSS being used, because you are using a caching plugin, and the cache needs to be cleared.

Anonymous

#258423

Hi Trevor,

Aah, I see what happened. I didn’t comment out the original code the right way when testing this morning. Sorry about that. This works great! Thank you for helping.

Best regards, Haiko.

Trevor

#258428

Thanks for getting back to me. I will close this thread for now.

[Author]

Posts