398
Views
6
Comments
Make a list with the items next to each other
Question

Hey,

Yesterday i asked the question how i can set item next to each other. The helpful answer was width to 50% or use a gallary, but i have 1 problem now. I want a whitespace of 10 px between the items. When i use the solution of yesterday its possible to have more whitespace to the first 2 items then the third and fourt.

(i want to make a header with different filter option for categories.)

Can somebody help me with this?

Thank you!

2020-12-02 08-35-00
Jochem Vlug

Hi Stefan,


When using the Columns 2 widget you can define the gutter size in the properties. 


Does this solve your issue?


Gr

UserImage.jpg
Stefan de Vaan

Thanks for your fast answer!

I already tried with the gallery but for example if i have 4 categories:

Pizza

Shoarma

Spaghetti bolognese

Hamburger

I want to transform the list to this:

Pizza Shoarma Spaghetti bolognese Hamburger 


With columns the pizza has more white space then spaghetti bolognese

UserImage.jpg
Ellakkiya

Hello Stefan de Vaan ,

You can use the margin or padding property for container

Hope this helps!

Regards,

Ellakkiya.S

2020-09-01 10-42-42
Stefano Valente

With CSS you can do anything you want.


The solutions shown will work and you should implement them.

I just want to show you the magic of flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

And to get better acquainted with it, this fun puzzel/game:

https://flexboxfroggy.com/#nl




UserImage.jpg
Stefan de Vaan

Hi @Ellakkiya.S 

The problem is that i use the gallery ( i dont know what i cant use instead of a gallery to play the list item next to each other)

When i use your solution then the items have more whitespace

2020-12-02 08-35-00
Jochem Vlug

You can just use the list group widget! Then use the CSS and styling tricks mentioned by other for each element in the list (so you make a container with styling, put the contents (expression) inside and put that inside a list group widget.

Is the list of fixed length? Then I would still recommend using the Columns4 (or whatever number) widget.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.