Streaming live at 10am (PST)

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.



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?


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.


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


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.