Adding a div after x number of items, but in a full width row

JavaScript
1

Hi,

I have some divs that display in boxes using flex:

What I am trying to do is to insert a full width div after the second row when whenever the row breaks responsively.

For example, when its on desktop, the row shows 5, but when the screen shrinks, there is less boxes, so I’m not sure how to add a div after the second row no matter what size the screen.

Can anyone recommend a way of doing this?

Thanks

2

Fairly sure you’ve wandered over the line into Javascript territory at that point, as it would require reordering the elements themselves.

3

Hi,

I see.

Can I move this to the Javascript forums?

I use this already for other parts of my site:

$(".single-listing-description .job_description p:first-of-type").after("<div class='single-listing-description text-center'><span>Text</span><div>DIV HERE</div></div>");

But I wouldn’t know how to make it work when the items break onto a new line when responsive.

4

Done :slight_smile:

1 Like
5

Off the top of my head, the only way i can think of to do it is (pseudocode incoming cause my brain is scrambled this AM, someone else will have to translate.)

Onresize:
Get DIV.
Get boxes.
Get OffsetTop of first box.
While(Box in boxes):
  If OffsetTop(Box) != OffsetTop(Firstbox):
     Insert (which translates to Move) DIV Before Box.
     Break
2 Likes
6

This is just for fun but if you use media queries to make the change of width then you can show and hide the appropriate element.

e.g.

I’m sure you could do something similar in JS using matchMedia and insert a div at the appropriate point. It does mean though that the elements can’t be a fixed width unless you want loads of media queries.

2 Likes
7

Many thanks :slight_smile: That looks exactly What I was looking for.

Thanks again

8

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