How to target collection list (last child) made as a grid

Hi there,

I give up. As a no-coder, I have tried to figure this out by myself - with no success.

I have a collection list made as a grid. Would really like to make the last item span two columns.

Structure is like this:

Screen Shot 2022-06-25 at 11.57.20

If I try to span the last item in the selector it spans ALL the items in the list.
Thought I could do it with custom code instead. Only need the code on desktop and tablet view.

This is what I came up with - but it doesn’t work…

<style>
@media (max-width: 1250px) {
.category-description-collection-item:last-child .category-description-wrapper {
 grid-column-start: span 2;
 grid-column-end: span 2;
}
@media (max-width: 991px) {
.category-description-collection-item:last-child .category-description-wrapper {
 grid-column-start: span 2;
 grid-column-end: span 2;
}
</style>

Any ideas on how to get this to work?

Thanks.


Here is my site Read-Only: (https://preview.webflow.com/preview/travelhubber?utm_medium=preview_link&utm_source=designer&utm_content=travelhubber&preview=f63553f7b0cbf05bef5452f6c156b44e&pageId=62b685322f00916fb9f0dac8&workflow=preview)

(how to share your site Read-Only link)

1 Like

hi @Ole_Hansen there are several issues you should revisit. I have done video explaining how things should be done plus some bonus how you can make it more future proof.

2 Likes

Hi Stan.

You are absolutely awesome. Can’t thank you enough.

Regarding the Finsweet script, it has to be in HEAD according to their docs.

This is my own side project so their will not be additional categories added later, BUT I might go with you suggestion anyway.

Can you do me one last favor?
Can you paste the correct code snippet in a post so i can “just” grab it and paste it into the HEAD?
Otherwise I might mess it up :smiley:

Again, you are a star :star2:

HI @Ole_Hansen do you mean CSS code?

I mean this piece of code. Lost track :slightly_smiling_face:

AND then - final question.

Instead of pasting the style into the HEAD can’t I “just” put it in an embed directly on the page as you did. Easier to manage I think. What are the best practices?

hi @Ole_Hansen the code I have showing was only a hint how things may be solved and as your conditions should be based on only on number of items but also on viewport width things will be more complex and as you have mentioned you do not planning to add or remove other items so keep it simple use only fixed CSS.

According to embed element VS in <head> code best practice is to place code into page setting <head> or before <body>. Im using embed to save time between:

  1. go to navigator and click page tab
  2. find page and click on cog wheel to open page settings
  3. scroll down
  4. adding code
  5. save setting
  6. open navigator
  7. find an click on element I need to review
    and if I’m not happy with result repeat steps 1-7

So to avoid this long process to just see results, with embed I have immediate visual feedback but once job is done and page is finished in most cases I move code into page <head>. Just to be clear embed has different purpose as e.g. adding iframe or svg etc.

Hope that make sense :wink:

1 Like

It makes sense. Fixed it already and will move the code to page setting before launch. It is convenient to see the change right away - so a nice tip.

Again, thank you so much for your help :pray:

1 Like