Feeling stupid - styling collection items

The nice thing about a company helpdesk is that you have the feeling that there is no stupid question and that they are there for you. The problem with a community environment is the opposite: you are afraid to ask a stupid question amongst seasoned users.
Well … here I go :wink: After watching all the videos I have something that is difficult for me that will be children’s play for you. But my problem remains …
All I want is this: from a collection list I want to make something like the picture. I know how to get the picture and text and link from the database, but I don’t see how I can position the picture left and the link right and name and text in between. Stupid, I know, but hopefully someone wants to help!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @erwblo

Welcome to the forum!

The unique thing about the Webflow forum is there are no stupid questions here, no-one will pounce on you for not knowing something (and if they do - let a mod know!). Whether your question is seemingly basic or advanced, the culture around here is positive and helpful :slightly_smiling_face:

The unique thing about Webflow’s actual customer support/helpdesk is it is made up of people from the forum/community, so that culture permeates through both!

Quick Q - do you want the link (clickable) area to include the title/text and/or the image - or just the square with arrow?

Also is it possible to share your read-only link, then we can advise based on your specific project/settings: :arrow_down:

Thanks @StuM! The link is not the most important bit. I do see how I get text under the image, that goes default, but I am looking how I can position a picture left, name + text next to that (under eachother). That is the most important bit for now. And the link preferably an icon linking to an external site.

Can you share your read-only?

Also made this: Webflow - There are no stupid questions to ask

And here’s the video for you with entire explanation :wink: there are no stupid questions (7:42)

Cheers,
Bart

3 Likes

Thanks! I’ll try some more first !

1 Like

@bart That was a lot of help! Thanks! @StuM too!

4 Likes

@erwblo

@bart

2 Likes

@bart A little furthe now :wink: https://webflow.com/design/iaas
But … if I ad a text now it doesn’t get under the title but next to the title. Any idea?

Hi @erwblo

That link won’t work as it’s your specific secure account version of the Designer. If you go to Project Settings instead, there is a ‘share’ button which provides us a read-only version of your Designer - we can’t break anything, just see the settings. :slightly_smiling_face:

Ah :wink: https://preview.webflow.com/preview/iaas?preview=ee47be48e7dcfb81007a3386d9feb2a8

1 Like

Hi @erwblo

All that’s missing is the Div (see Div Block 3 in the screenshot) to contain the Title and Text element.

wrap%20them%20in%20a%20div

Whats happening after this is added is, the Image and the Div Block 3 are then sitting horizontally side-by-side, but you can then stack Title and Text vertically within it’s own box (aka Div Block 3)

A good example of the box within a box, box model!

:+1:

Ah, done. That leads to the next: how can I make all blocks as big as the biggest block?
https://preview.webflow.com/preview/iaas?preview=ee47be48e7dcfb81007a3386d9feb2a8

I’ve got to dash out for half and hour - but take a look at this mini-tutorial from @PixelGeek in the meantime:

1 Like

I’m back - looks like you’ve made some progress?

Final settings are going to depend a bit on final content and your own design choices (there’s not always a ‘right’ way - sometimes multiple ways) but here’s a couple of changes you could make for more centred/balanced content on the ‘Collection Item’

Thanks, we’re getting there! Two more important ones:

  • How do I make it mobile ready?
  • What I want in the end is:
    Titel + subtitel + under that collection with a certain filter.
    I want that repeated X times. And then change titles and filters of course. Can I copy paste?
    Sorry for bothering you again!

I’m getting there! https://preview.webflow.com/preview/iaas?preview=ee47be48e7dcfb81007a3386d9feb2a8