I have some
divs that display in boxes using
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?
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.
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.)
Get OffsetTop of first box.
While(Box in boxes):
If OffsetTop(Box) != OffsetTop(Firstbox):
Insert (which translates to Move) DIV Before Box.
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.
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.
Many thanks That looks exactly What I was looking for.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.