Streaming live at 10am (PST)

Ripping apart a site to see how it works - CLOSE POST


#1

This is just a learning site... not a client... or even a prospective client.

I've come across a design that I need a little help understanding.

I like the layout... but I cannot fully - figure out how to reproduce a similar design.

I've tried using floating div's and the webflow row element... to no avail.

In the site below

  • there seems to be two (top / bottom) divs...

Div 1 that contains the company name and the top options.

Div 2 contains the "we are your local..." and the photo.

Div 2 appears to have a child div:position:absolute within it.

This makes the photo stick to the bottom.

I can replicate all of this... BUT

when you resize the width of the window...
- the "We are your local..." text stays BELOW the 1st div.

I cannot get this work. When I resize the window... the text moves up and covers the 1st section.

This doesn't happen with the original site.


#2

no one knows how this is done ?


#3

Hi Revolution,

Create a wrapper div with position relative, then inside of that break it up into three sections - add a background to your wrapper div if needed/wanted.

  1. Header/Nav Div (set at display block)...
  2. Hero Statement Div (set as display block). (set the z-index higher for this to avoid overlap)...
  3. Absolutely position your third "floating" image with a percentage from the bottom/right of the main wrapper...

#4

That's kinda what I was doing.

I had to go back simplify it a little.

I think I was making it more complex than it should've been.

Working almost perfect now. Slight glitch... but I think it more related to the breakpoint.

Thanks :slight_smile:


#5

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