Streaming live at 10am (PST)

Grid Aspect Ratio - Help


#1

Hello,

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!

Normal without resizing browser

When I resize the browser from left to right, this happens - Not ideal for me

The correct way it should work, same resizing - Right to Left, but keeps its proportions


#2

can you give us a link to your project so we can help you out?


#3

Yes of course,
http://castle.webflow.com


#4

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 wink

<script>
    function bk_keepRatio() {
    	var wbox = $('.box-1').width();
    	// wbox = 4
    	// height = 3
    	// height = wbox*3/4
    	$('._2nd-row').css({
    		'height' : wbox*3/4
    	});
    }
    $(document).ready(function() {
    	bk_keepRatio();
    	$(window).resize(function() {
    		bk_keepRatio();
    	});
    });
</script>

#5

I always wanted to know how to do that, thank you for the maths bartek-.

Where do you put the script? Are you obliged to put it in the "body" field on site settings, or is there a way to attach it just to one page?


#6

You can put it in the Custom Code section in Site Settings (dashboard). it should be in the second field called before </body>.


#7

Hello There,

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.

aerdesz.webflow.com

Thanks a lot in advance,

Adam


#8

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 smile

There are also custom jQuery scripts, like Masonry which does this:

http://masonry.desandro.com/

Cheers, Dave smile


#9

Hey @cyberdave,

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.

Thanks!

Adam


#10