Streaming live at 10am (PST)

Divs not showing up on all my projects

#1

Hi,

I have a basic CMS going for a portfolio. I am trying to design it out similar to the portfolio tutorial, but with my design instead. I have a few elements that are showing up in all 4 projects, namely the bg pink div. The Project info div is not showing up in all 4 project tho, but its in the same hierarchy. What did I do wrong?

Also, the info being pulled from the cms is grabbing it from the wrong project, it should be from proj 1 and its pulling from proj 4. Im assuming this is all part of the same problem, let me know what I can do to fix this, thanks so much!

Same thing as above for the project number container as well.


Here is my public share link: LINK
(how to access public share link)

#2

@brando @cyberdave any thoughts? Thanks!

#3

Absolute-positioned elements are completely removed from the document flow, so they no long touch or push other elements around them. They’re pinned to the first parent element that has position relative, absolute, or fixed enabled. webflow docs

Set the collection item position to relative (For now all of your “div cards” position absolute related to the “first relative parent” ==> Projects Section) ===> The result - “divs not showing up” (Stack one on each other - so you see only one div).

solution:

Anyway - you use to “much” absolute elements (This is very simple layout - in your case you use endless styles (And like this you get a lots of bugs + Very hard to create endless nested absolute elements responsive)).

#4

The same layout with 5% styles VS your example (And without any absolute position):

  1. flex wrapper

Left col 75% basis

Right col basis 25% (= 100%)

Put inside left col div for the image with top-padding of 56.25% (16:9 images) - or 75% in your layout/example (one style)

https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Right col - put div with heading and p (add bg & padding & round corners)

Now create the overlap effect. Change the right-card position to relative and use some negative values.

The only problem is the card no align to the container. But its easy to fix this by adding left 35px for the image

-or- add negative right margin for the parent

Done :slight_smile:

mobile

Adapt to mobile (Less than 1 min)

parent

left col
image

right col
image

right card (remove the position relative and change top-right/left border-radius to 0px)

VS your mobile layout (broken layout)

tablet

date

The box (for date and so on) - set div image to relative - and put inside box with absolute position

#5

You are a genius thanks so much! got it working!

#6

Thanks :slight_smile: Please mark as solution to close this topic.

1 Like
#7

hey @Siton_Systems I thought it had it working but my project section doesnt seem to be reacing correctly to responsive. The main picture is scaling correctly but the info card is not, can you tell what i did wrong? Also the proj number and the tags dont want to scale either. Let me know what you think, thanks so much!