Help with dumb simple issue!

[Alex144 (Alex)]

Hi guys!!!
I am new to all Webflow stuff, and the main reason I am here is that I am trying to build super duper simple portfolio, based on Behance projects. I tried to make simple portfolio based on Adobe Portfolio service.
But it so limited and sucks in any way, but nonetheless, I made a layout that Does work for me, even responsive behavior was great, but I cant upload simple project covers and force it not to distort the image.

So I am trying to recreate the same stuff in Webflow. But I am going crazy because I tried to make it many many times, waisted days with no success. Nor I could understand how to set proper CSS, and what components are better for this task.

I will attach 3 picture so you can see what I try to create.
In a quick overview, the main page is a “product” page, which is two columns of images.
I wanted to make max with of all grid: 1800px and each picture will be 900x505px.
Important note, I must upload exact size of the image and see it the same size, I assume the size of Div block should be the same size as the image, but could I talking BS…

Also, there will be two pages like this, one is for product works, and second for illustrations.
When you press on the image cover you will be taken for page of the project which has super simple layout that same for all projects on website: Header, text, and long div block container which have 1400px wide images inside, those images stacked on top of each other, exactly the same way like on Behance website, so I don’t know what is right to do. have each div block for each image, or just throw it like crazy.

By the way, the cover of project 900x506px also has inside Header text, the name of the project.
So I have like 30 projects, and the question should I mess with CMS, this another forest that I can be lost.

I apologize for so much text and guess very dumb questions, but I suffering on this two weeks, with hundreds of videos I watched, and this didn’t help me to grasp this. I have no links to provide because I just need to make everything new from scratch.

if you can help me you will be my heroes!!!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[aaronocampo]

Hello @Alex144

What you’re trying to achieve here is quite simple to do in Webflow, I would to suggest flexbox to do that, and I would suggest CMS for your projects definitely if you want to avoid the hassle of ‘design’ every project page.

I’m going to create a small video to give you an idea of how to achieve what you mentioned. Once I have it I’ll edit this comment and upload it here.

[Alex144 (Alex)]

Dude my Mom doesn’t care about me as you! Thanks, man!!! Endless appreciation!!!

[aaronocampo]

Hey sorry for the delay, check this out:

http://cloud.ipagroup.co/paxH

I hope this helps.

[Alex144 (Alex)]

I very appreciate your help!!! Unfortunately, this is not quite what I try to accomplish.
My main concern is that I have exact With and Hights for each cover which maximum is 900x506.
And it only can be responsive like a picture, to have a fixed relation of withs and highs. So this is cant work with flexbox simply because I need all my gallery will be maximum 1800px wide on the wide screen and rest space is white. On the tablet view, I want to remain the same layout but to make it reduce with according to the width of the tablet. And only on the mobile portrait, i want them to stack on each other. But again all this time the covers don’t change aspect ratio!!!

I hope you have an idea how to do it, and how to have in mind that I need to make this with CRM.
Thanks for all your help!!!

Video Example

[johnminshall]

You will probably need to learn how to create a div with a fixed aspect ratio first and then you will be able to incorporate this within your collection list.
900x506 is a 16:9 ratio by the way. My advice would be to stop thinking in terms of pixels and get comfortable with percentages. I have put some useful links below:

Aspect Ratio Calculator - 4:3, 16:9, 21:9 (Ratio calculator)

https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css

Collection list | Webflow University

[aaronocampo]

Hello @Alex144

For the maximum width that you want to achieve just wrap everything into a Div with maximum width of 1800 in this case. For the part of the fixed aspect ratio I would suggest the same that @johnminshall is mentioning and use percentages instead of fixed pixels.

I would try to use an absolute element image inside of the div to use it as background although that could become a little bit more tricky.

[Alex144 (Alex)]

Finally!!! I made it! I opened dozens of websites and searched for similar patterns. Actually, it was not hard at all. But I facing ane problem right now, I cant make Header be inside the div block, he pops on the top. But in the layers, he is inside. So I don’t know that I am missing here. Can you look at it?
And thanks for your support!!!

Website Portfolio

[aaronocampo]

Make your heading ‘absolute’, that will do the trick

[Alex144 (Alex)]

Honestly, this is the first time I am hearing about this. How I do it?

[aaronocampo]

Like this: