On the GRID system, how would I get the Grid blocks to keep the proportions? Like the aspect ration to stay 4x3? The first two example is what i’m experiencing now. If someone could help, that would be great!
Since you have a fixed height of the _2nd-row you might need to use jQuery to calculate the width of the object and set it’s parent object to stay in proportions. Let’s do some math and magic in here
I’m having the same issue. How do I link the inserted code with my actual page? I want to achieve something like this grid behaviour: http://mikekus.com/portfolio so my thumbnails are keeping their proportions and it is also responsive.
Hi @adamerdesz, I thought I would also post this article, about grid aspect ratio and css. You can apply css styles to your elements, using these concepts, and you can also use custom css if there is some bleeding edge thing.
I hope that helps. This is also similar to when you are trying to embed a youtube video with extra parameters that our built in widget does not have, you can embed youtube videos, and specify a few css settings to achieve responsive 16:9 video embeds… see the following post, how to do that:
Both use css to make their elements responsive according to a certain aspect ratio desired. There is lists out on the net, that show the different settings for different aspect ratios. Once you have the aspect ratios for the elements you want, then you can position those on the page using display:inline block, float left or right, in Containers, or Divs or Sections, you can use columns if you want, or sliders, or tabs etc… so it is up to your imagination
There are also custom jQuery scripts, like Masonry which does this:
Thanks for the quick response. I more or less understand what should be done, I just have difficulties how to link and make these code to take affect on the page. Do I have to do something around the custom attributes? Or it is by using the embedding widget? Like if I have a div block, and I want to keep it’s aspect ratio, I guess somehow I should refer to the code placed in the body section and visa versa.