[Trouble with Grid Layout] 50/50 Grid -- Trying to Recreate Section from Wordpress Site in Weblow

Design help General
1

I’m trying desperately to recreate this section layout for a client. For some reason, I feel like a total newbie and can’t get it to be responsive at all.

Also having trouble with the height. I guess I want a Max Height of around 600-700px.

I’m using Relume components and pulled from the Porfolio section.

Any help would be appreciated.

Here’s an image of the SECTION I want to copy…

CleanShot 2024-12-01 at 18.46.24@2x
CleanShot 2024-12-01 at 18.46.24@2x1920×885 209 KB

Here’s the link to the Wordpress site where the section is…
https://patiotime.loftocean.com/demo9/

Here is my site Read-Only: Webflow - LD-Grid

2

I tend to favor simplicity, so I’d go with

DIV - grid, 2col 1row
  IMG - 100% 100% cover
  DIV - flex vertical
    DIV - flex horizontal 
      IMG - 100% 100% cover
      DIV - content, e.g. "Dry Aged Beef"... 
    DIV - flex horizontal reverse ( separate subclass ) 
      IMG - 100% 100% cover
      DIV - content, e.g. "Dry Aged Beef"... 
    DIV - flex horizontal 
      IMG - 100% 100% cover
      DIV - content, e.g. "Dry Aged Beef"...

Then at tablet, you’d change the grid to 1 col so it flows vertically

Then at mobile landscape, you’d change the inner flex items to vertical, and the middle one with the subclass you’d un-reverse.

That gives you a nice responsive view at all breakpoints, and it solves the issue you have with the image-text constructions so that in mobile view, they flow readably in image/text pairs.

3

Will give it a shot. Thank you!

4

@memetican

Here’s what I’ve got so far. I don’t really want to use a container with a max width, but as you can see, the images take up the entire page.

Any ideas for how to make this look decent on a normal screen size – while allowing for a full VW design?

Also, how (and where) do I put a max height on the section?

Thanks again,
James

https://preview.webflow.com/preview/ld-grid?utm_medium=preview_link&utm_source=designer&utm_content=ld-grid&preview=5f058f0228fcbcffd53a967dd93df8dc&workflow=preview

5

I’m more of a problem-solver than an artist.
Others here may have some slicker design ideas.

You’re on the right track through- I’d probably-

  • Make the image/text cards each 50% width
  • On the text cards, make them flex vertical and give some padding
  • Assign a fixed height to the hero image, e.g. 600px
  • Assign a fixed height to the smaller images, 1/3 of that e.g. 200px

If you want to make it mare responsive to larger breakpoints, another technique is to use vw as the height units so that as the width of the browser increases ( irrespective of height ), your layout grows more organically.

Here I used 45vw as the height on the hero image, and 15vw height on the smaller images.

All of your element sizing will have to be adjusted and rethought as you design for smaller breakpoints.

image
image1920×954 151 KB

6

@memetican -

You’re really helping me think through this. I sincerely appreciate the time.

Would you mind sharing that READ-ONLY link?

7

I just used your readonly link to show the adjustments. Those changes don’t save anywhere.