Layout Alignment Trouble *headdesk

Trying to figure out how to properly align/layout 7 images (including the hero) but can’t figure it out. The only one I have working is the hero, it’s positioned visually (not sure if properly) correct and it scales up/down well. I’ve been watching the Webflow tutorials and can’t get it right still for the remaining 6 images.

My thinking was section>div image wrap (set to flexbox) then add the 6 images as divs but I keep messing it up especially when I add the rotated text, it’s just a mess and doesn’t stay with the image or scale.

Attached XD screenshots of layout needed, xd link to view as well.
Webflow read only link as well.

**update - sometimes the forum is glitchy - do others experience that too? Sometimes doesn’t do anything when clicking. I mistakenly posted this topic under the wrong section category, had trouble getting the edit and submit buttons to actually work. Idk.


https://test-layout-notworking.webflow.io/


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

Hi Gabrielle
Not sure I can help you. You didn’t attach the read only link and I’m not sure I have the time to rebuild everything. Anyway, I recommend you use a Grid :slight_smile:

Hi Gabrielle,

Looking at this, it seems like it would be a simple case of using margins and z-index positioning to achieve the layout you’re looking for.

I’m trying to use grid now. I really want to use grid on this page but I can’t get the spacing right.

@ColemanChrisB I had been reading I should try to avoid using padding/margins along with absolute positioning whenever possible. I am trying to use grid layout on this page but I am having trouble getting the spacing right. Hours go by and I am still failing. :smile:

I really don’t think it’s possible. Even if you lay out all of these elements in a grid, because the positioning is not symmetrical, you will still have to use some type of “non-standard” positioning methods to achieve things like this:

image

The rest MIGHT be doable in a grid, but I would honestly say that it’s going to end up being a lot messier than using absolutes and margins.

:cry:
@ColemanChrisB

So should I start over and try to use divs only instead? My thinking was that I would still have to use margins/padding a little bit with grid but less than I would only using divs. Being new to this I feel like I use margins/padding too easily since I don’t currently know a better way to achieve it.

I’m having a lot of trouble trying this with div blocks too. I don’t understand how to achieve this layout.

Hi Gabrielle,

This is about the best I can do right now, but I created a sample page that shows you an idea of how I would build your layout. Hope this can get you on the right track.

2 Likes

@ColemanChrisB I am heading out to work but I will try and figure this out afterward. Thanks Chris.

1 Like

@ColemanChrisB Thank you!! You definitely helped me in the right direction. So helpful, can’t thank you enough.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.