MOBAFire's third Mini Guide Contest of Season 14 is here! Create or update guides for the 30 featured champions and compete for up to $200 in prizes! 🏆

Not Updated For Current Season

This guide has not yet been updated for the current season. Please keep this in mind while reading. You can see the most recently updated guides on the browse guides page

Responsive columns

16 0

102,964 Views

10 Comments

Build Guide By Updated on

Guide Discussion (10) More Guides

New Comment

You need to log in before commenting.

(12) |

Hey, great guide! I have a very important question: are there commands like rowspan and colspan as in the tables?

(101) |

Hi,
As far as I know, those two commands do not have an equivalent in responsive columns. I'd argue that colspan isn't really necessary. For any new row, you can make new cells (/cols) of arbitrary width, which is not in any way set by any other rows (unlike tables, which form a predefined rectangular grid). Having rowspan could be nice in some cases, however that just isn't possible :( Similar results can be achieved with nested responsive columns, however handling those can be annoying.

(12) |

OK, thanks for the answer!

(26) |

I got two questions to ask:

1. Is it possible to remove one of the column sides? If yes, plese tell me how to do it?
2. Is it possible for the column sides to have different colors? For example, top side colored red, left side colored blue, etc. If yes, then can you please tell me how?

Thank you in advance! <3

(101) |

As far as I know, neither is possible (if 2. is possible then 1. is too as you can set the color to transparent ;) ).

It is of course possible to cheat the system by 'manually' adding sides. This is of course more tedious and has some limitations (e.g. 'normal' curvy borders become impossible to realize with code alone). Such a thing can be realized with both tables and responsive columns, however I find it to be a bit easier with tables because then the alignment along rows is automatic. While with responsive columns you'd have to carefully set the width (and height) of all the columns in every row.

an example

I guess its usefulness depends on what you want to do with it...

(26) |

I see! That is very useful!! I am glad to know that the opportunity exists at least!! Thank you so much!!

I got one final question to ask, which code is used here to create these borders? they seem responsive to me... Is it possible to create one myself or should I just grab the one that I want from websites -if they exist-?

https://i.imgur.com/EaYqVMr.png
Source of image: https://www.mobafire.com/league-of-legends/build/12-16-the-ultimate-guide-to-akali-the-rogue-assassin-fr-en-587802

Thank you again <3

Load more comments (2 more replies) →

(101) |

This is actually not (responsive/table/column) code at all! The borders on the side with a color gradient on the side are custom created images. These are then added to some cell of the construct (in this case a table) the entire structure of the guide is build of. Such a colored bar with a gradient isn't that hard to create in almost any kind of drawing program. Heck, you can even do stuff like this in Microsoft Powerpoint x)

It is probably a lot of work to ensure that all those 'custom' borders have the right width/height. If you intend to do this I recommend working with placeholders and adding/creating the images once you know what their size should be.

(26) |

I see! Thank you so much for the help, I appreciate it! <3

wrote:

Heck, you can even do stuff like this in Microsoft Powerpoint x)

xDDDDDDDDDDD

(26) |

I find it strange that nobody thanked you properly for this wonderful guide. I'm glad to be the first. I check your guide occasionally when I create or update any of my guides. I truely appreciate the effort you put in the guide, it is really helpful! <3