Grid weirdness & image resizing itself

Hi everyone,

I’m trying to apply a grid so that I can get my layout to look like this:

However I can’t seem to get it to behave.

First of all, I’m unable to align anything in the same way as the visual. I’m sure I’m just missing something obvious with grid, but can’t work it out.

Second of all, the image on the right (manually aligned) seems to jump down to a tiny size randomly in the designer and in the published site, and I am not sure how to stop this:

If anyone can shed some light on either of the above issues, I’m all ears!

Many thanks,
Gordon


Here’s the staging link: https://unfauxgettable.webflow.io/
Here is my site Read-Only: https://preview.webflow.com/preview/unfauxgettable?utm_medium=preview_link&utm_source=designer&utm_content=unfauxgettable&preview=a07beae22f528d04164f167f4c42bda3&mode=preview

Hey @GRD very cool site.

I have a solution that I am not positive you are looking for… but it will work.

You are trying to add padding around your images by using the grid columns and rows. I would personally avoid doing this as it will become quite cumbersome when you are trying to work on responsiveness.

Instead, I would recommend 3 rows and 3 columns and remove all px gap. This will help a lot with responsiveness.

Secondly, I would add ‘related’ content together in a div…

Green Lines = Columns/Rows
Red Boxes = Div
Numbers = Div number

The reason I’d do the divs, is because you can then add the padding as a %. This will also help with responsiveness. You can add additional padding/margins directly on your text if needed.

Now for positioning. Select your div and place them manually into the grid. You can then get them space properly.
Div 1 = Row 1 - Row 1 & Col 1- Col 2
Div 2 = Row 1 - Row 2 & Col 3 to Col 3
Div 3 = Row 2 - Row 3 & Col 1 - Col 1
Div 4 = Row 3 - Row 3 & Col 2 - Col 3

image

Final note: Make the grid into %'s instead of FR. This will help you with what you are doing. FR will vary depending how many columns/rows you add.

Column 1 = 40%
Column 2 = 20%
Column 3 = 40%
image

Sorry, I know the image is a little messy and hard to follow, let me know if you need additional clarification.

Hope this helps

1 Like

Here is what it looks like on your site. Things are not sized properly though…

1 Like

Thank you SO MUCH! That makes perfect sense and wasn’t messy or hard to follow at all, quite the opposite! This is the first time I’ve attempted to use grid, I never thought to use % and margins in the divs - much more sensible way to do things. You’re a lifesaver! :blush:

1 Like

@Dave_Birnie I wonder if I could borrow your expertise one more time please?

When the section responds down, the text overflows its container. I’ve checked there are no fixed heights on containers etc. but I can’t seem to make it resize the grid so it fits:

I also added another row to the grid as it made the bottom half behave a bit better :blush:

Hey! Looks great!

Unfortunately, you have an issue with font size… font is the toughest thing to work with, in my opinion.

You’re doing great using ems, but I’d recommend switching to vw and vh for this. VW is viewport width, and VH Viewport height.

For testing I did the following:
image
(List wgf)

&

image
(body-copy)

It seems to work well for me, (until you get into your tablet) but that’s a different problem to focus on after.

You may need to play around a bit.

Heres a vid… just does not get into much.

1 Like

That’s awesome, thanks so much. You’re right- font sizes are much trickier than I expected. Definitely a something I’ll anticipate better in future! Thanks for all your help!

You’re very welcome, this was actually an education for me as I am not the best at managing fonts. I learned something by checking it out too!