Column to go from 4 to 3 to 2


I have this portfolio I am building wich up till now looks like this:

Now I would like the thumbs to go to 3 in a row on tablet mode and 2 un a row on phone (landscape + portrait).

Ho can one do this?


Hi @Goderd.

Yes, it is possible, but then you will have to use regular divs instead of rows and columns. With columns there is only option to change 4 to 2 from device to device.


1 Like

Hi Sabanna, thank you for the quick reply!

As I understand I then need to built it like this:

• Add a block.
• Give it a class.
• Float: leftGive it a % width based on how many columns you want in your row (50% if you want 2, 25% if you want 4 columns, etc)
• For desktop you can set 25% width for 4 columns. On Tablet set
33.33% for 3 columns. On Phone L set 50% for 2 columns. On Phone P set
100% for 1 columns.

But when I try this I can’t seem to get the mouse over (95% black div block) layer right.

How would I go about that?

1 Like

Yes, you absolutely right about structure.

And it is hard to tell where was the problem without seeing read-only link.

Usually, div-wrapper (where inside will be picture and overlay) should have position: relative, and elements inside it position: absolute.

But more I can tell you only when I will see the project.

Or at least tell more details about problem that you had.

1 Like

Ok thank you Sabanna. I will try that. If I can’t get it to work I will get back to you :smile:

1 Like

Got it to work Sabanna! Thank you verry much!


:wink: You did it! That’s awesome!


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.